如何在 React 中使用 useState 在对象数组中添加 object？

Question

I am working on a page that contains a test with questions, answers and points/grades. Based on the number of questions selected by admin, it will generate a dynamic inputs fields corresponding to the question, answer and point, with an add question button. When I press the add question there should be a callback to the handleQuestion function where an object is created with question, answer and points properties. The values for question, answer and points are set using useState. I try to add the new object in testContent array using spread operator (...), but when I press "add" after I completed the fields for a question, nothing changes. Can somebody give me an idea on what I am doing wrong?

This is the handleQuestion func:

const handleQuestion = (e) => {
    e.preventDefault();
    const createQuestion= {
       "questionContent": question,
       "questionAnswer": answer,
       "questionPoints": points 
    }
    setTestContent(testContent => [...testContent, createQuestion]);
}

This is where the question, answer and points are setted:

return  questions.map((quest) => (
    <div>
        <div>
            <label htmlFor="testContent"> Question {quest + 1} </label>
            <input
                type="text"
                className="form-control"
                name="question"
                //value={question}
                onChange={onChangeQuestion}
                validations={[required, validContent]}
            />
        </div>
        <div>
            <label htmlFor="testContent"> Answer for question {quest + 1}</label>
            <input
                type="text"
                className="form-control"
                name="answer"
                //value={question}
                onChange={onChangeAnswer}
                validations={[required, validContent]}
            />
        </div>
        <div>
            <label htmlFor="testContent"> Points for question {quest + 1}</label>
            <input
                type="text"
                className="form-control"
                name="points"
                // value={}
                onChange={onChangePoints}
                validations={[required, validContent]}
            />
        </div>
        <button onClick={handleQuestion}>Add question</button>
    </div>
    ))

And:

const[question, setQuestion] = useState("");
const[answer, setAnswer] = useState("");
const[points, setPoints] = useState("");
const[testContent, setTestContent] = useState([]);

Answer 1

content is not a key on createQuestion, so you will only add undefined to the testContent. createQuestion only has "questionContent", "questionAnswer" and "questionPoints" as keys

const createQuestion= {
   "questionContent": question,
   "questionAnswer": answer,
   "questionPoints": points 
}

prob you want to do

setTestContent(testContent => [...testContent, createQuestion]); 

instead