As I dynamically generate Material UI form components, I encounter an issue with updating their values. The value prop is assigned to a useState values object, and when I update this object and the state, the value in the object changes correctly but the Material UI component does not reflect this change as it is still tied to the original value object. This seems to be related to the dynamic creation of these components using a button.
The main problem lies in the value prop of the TextField component not being updated.
I handle the updates for these fields within the handleAnswersChange function. It checks if an answer already exists, and if it does, it updates it. If not, it creates a new one.
interface State {
title: string;
question: string;
answers: Array<Answer>;
correctAnswer: number;
}
interface Answer {
answer: string;
id: number;
}
export default function CreateQuestion() {
const [answers, setAnswers] = React.useState<Array<JSX.Element>>([]);
const [errorAnswer, setErrorAnswer] = React.useState(false);
const [values, setValues] = React.useState<State>({
title: "",
question: "",
answers: [{ answer: "", id: 1 }],
correctAnswer: 1,
});
useEffect(() => {
console.log(values);
}, [values]);
const handleChange =
(prop: any) => (event: React.ChangeEvent<HTMLInputElement>) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleAnswersChange = (
prop: any,
id: number
) => (event: React.ChangeEvent<HTMLInputElement>) => {
let answerIndex: number = 0;
let doesExist: boolean = false;
values.answers.map((answer, index) => {
if (answer.id === id) {
answerIndex = index;
doesExist = true;
}
});
if (doesExist) {
const tempValues = values.answers;
tempValues[answerIndex] = {
answer: tempValues[answerIndex].answer + event.target.value,
id: id,
};
setValues({
...values,
[prop]: [...tempValues],
});
} else {
setValues({
...values,
[prop]: [...values.answers, { answer: event.target.value, id: id }],
});
}
};
const createAnswer = () => {
const array = [...answers];
array.push(
<Box sx={{ m: 1 }} key={answers.length}>
<FormControl
sx={{ width: "60ch" }}
variant="outlined"
key={answers.length}
>
<TextField
id="outlined-required"
key={answers.length}
label={"Answer " + (answers.length + 1)}
value={values.answers[answers.length - 1].answer}
onChange={
handleAnswersChange("answers", values.answers.length)
}
/>
</FormControl>
</Box>