Textfield not working properly inside a table ReactJs - reactjs

Question

I have an object containing an array of objects
initialPreconfigTodoState = {
todos: [
{
title: 'title1',
dueDate: new Date(),
create: true,
assignedTo: 'role',
},
{
title: 'title2',
dueDate: new Date(),
create: true,
assignedTo: 'role',
}]
};
I use this array of object to control the state of a Textfield in a table
const [preconfig, setPreconfig] = useState(initialPreconfigTodoState);
{preconfig.todos.map((todo, index) => {
return (
<TableRow
className="h-64 cursor-pointer"
key={Math.random()}
>
<TableCell className="th" component="th" scope="row">
<TextField
id={`titleForm${index}`}
name={`titleForm${index}`}
onChange={(event) => handleTitle(event, index)}
value={todo.title}
type="text"
variant="outlined"
required={todo.create ? true : false}
fullWidth
/>
</TableCell>
when I try to type in the Textfield I don't know what happens but I need to click the Textfield for every character I type, I think is the useState hook that is causing this problem when re-rendering the component and I can't find a solution for this.
this is my handle function on the onChange Callback,
const handleTitle = (event, index) => {
let newArray = [...preconfig.todos];
newArray[index] = {
...newArray[index],
title: event.target.value,
};
setPreconfig({ todos: newArray });
};
here is the full code
const initialPreconfigTodoState = {
todos: [
{
title: "title1",
dueDate: new Date(),
create: true,
assignedTo: "Role"
},
{
title: "title2",
dueDate: new Date(),
create: true,
assignedTo: "Role"
}
]
};
function TodoDialog() {
const [preconfig, setPreconfig] =
useState(initialPreconfigTodoState);
const handleTitle = (event, index) => {
let newArray = [...preconfig.todos];
newArray[index] = {
...newArray[index],
title: event.target.value
};
setPreconfig({ todos: newArray });
};
return (
<div>
<Dialog open={true} maxWidth="xl" scroll="paper">
<DialogContent>
<div>
<Table aria-labelledby="tableTitle">
<TableBody>
<TableRow className="h-64 cursor-pointer" key=.
{Math.random()}>
<TableCell className="th" component="th" scope="row">
Title
</TableCell>
<TableCell className="th" component="th" scope="row">
Due Date
</TableCell>
<TableCell className="th" component="th" scope="row">
Asigned To
</TableCell>
<TableCell className="th" component="th" scope="row">
Create
</TableCell>
</TableRow>
{preconfig.todos.map((todo, index) => {
return (
<TableRow
className="h-64 cursor-pointer"
key={Math.random()}
>
<TableCell className="th" component="th" scope="row">
<TextField
id={`titleForm${index}`}
name={`titleForm${index}`}
onChange={(event) => handleTitle(event, index)}
value={todo.title}
type="text"
variant="outlined"
required={todo.create ? true : false}
fullWidth
/>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
</DialogContent>
<DialogActions>
<Button color="primary" variant="contained">
Cancel
</Button>
<Button type="submit" color="primary" variant="contained" autoFocus>
Save
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

That's because the key={Math.random()} on TableRow.
Change it to key={index} and it should work.
With the Math.random() your keys changes every rendering and react loses its reference.

Answer 2

The issue is caused by thenuseState indeed. Your whole form (I suppose it's a form of some kind) changes the array from which it's mapped in render. No wonder the whole form re-renders.
The obvious solution would be to store the input values (eg in state) and update the original array (via setPreconfig) only on submit.