Project 11: FAQ Accordion

React Engineer

Builds on these lessons

Step 1 of 2

Project

A Controlled Form

Build a "Suggest a Question" form where the textarea's value comes from state, and onSubmit calls e.preventDefault() before logging it. Controlled means React state is the single source of truth for the field's value at every keystroke.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useState } from "react";

export default function SuggestQuestionForm() {
  const [question, setQuestion] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    console.log("Submitted:", question);
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea value={question} onChange={(e) => setQuestion(e.target.value)} />
      <button type="submit">Suggest</button>
    </form>
  );
}

← Previous Next →