---
myst:
html_meta:
"description": "Add form to add new question and answer."
"property=og:description": "Add form to add new question and answer."
"property=og:title": "Use Forms To Add An Item"
"keywords": "Plone, training, exercise, solution, React"
---
(forms-label)=
# Use Forms To Add An Item
## Add The Form
To be able to add FAQ items to the list, we will start by adding an add form:
```{code-block} jsx
:emphasize-lines: 2,14-23
:lineno-start: 23
:linenos: true
return (
);
}
```
````
## Manage Field Values In The State
To manage the values of the fields in the form, we will use the state.
Add a question and answer value to the state which contains the values of the inputs.
Add `onChange` handlers to the input and textarea which will change the values in the state when the input changes.
This pattern is called "controlled inputs".
````{dropdown} Solution
:animate: fade-in-slide-down
:icon: question
```{code-block} jsx
:emphasize-lines: 17-18,26-32,49-55,58-59
:linenos: true
import { useState } from "react";
import "./App.css";
import FaqItem from "./components/FaqItem";
function App() {
const [faqList, setFaqList] = useState([
{
question: "What does the Plone Foundation do?",
answer: "The mission of the Plone Foundation is to protect and...",
},
{
question: "Why does Plone need a Foundation?",
answer: "Plone has reached critical mass, with enterprise...",
},
]);
const [question, setQuestion] = useState("");
const [answer, setAnswer] = useState("");
const onDelete = (index) => {
let faq = [...faqList];
faq.splice(index, 1);
setFaqList(faq);
};
const onChangeAnswer = (e) => {
setAnswer(e.target.value);
};
const onChangeQuestion = (e) => {
setQuestion(e.target.value);
};
return (
```
````
## Submit Handler
Now that our values are managed in the state, we can write our submit handler.
Write an `onSubmit` handler which reads the values from the state and adds the new FAQ item to the list.
After the item is added, the inputs should also reset to empty values.
````{dropdown} Solution
:animate: fade-in-slide-down
:icon: question
And add this to the body of the function.
```{code-block} jsx
:emphasize-lines: 1-6,21
:lineno-start: 34
:linenos: true
const onSubmit = (e) => {
e.preventDefault();
setFaqList([...faqList, { question, answer }]);
setQuestion("");
setAnswer("");
};
return (