I have an Material UI text field which is populated by a nested JSON object pulled from an API.
Text is displaying in the textField just fine, but it cannot be changed. It is not accepting any new text.
{questions['Days']?.map((row) => (
<TextField
fullWidth
multiline
className="text-field"
value={row?.Response || ''}
onChange={(e) => {
setQuestions((prev) => { return { ...prev, Response: e.target.value };
});
}}
variant="outlined"
margin="normal"
label={row['Question']}
/>
))}
An Example of my JSON:
{
"Days": [
{
"Question": "What day is it today?",
"Response": "Wednesday"
}
],
"Time": [
{
"Question": "What time was it when you answered this question?",
"Response": "11:45 am"
}
]
}
Is it possible to use one method to create textFields for multiple nested JSON objects rather than hard coding them?