At the beginning of each session, I initialize the state with these variables:
state = {
firm: null,
office: null,
salesCode: null,
account: null
}
Each TextField in my application is rendered like this:
<TableCell>
<TextField
id="standard-bare"
defaultValue={items.data[i].firm}
margin="normal"
onChange={(e) => this.handleChange(e, items.data[i].id)}
/>
</TableCell>
I have a handleChange method to update the state based on user input:
handleChange({ event, id }) {
const { data } = this.state;
data[id] = event.target.value;
this.setState({data})
}
However, when I try to edit the text inside a TextField, I encounter the following error:
TypeError: Cannot read property 'target' of undefined
UserDataTable.handleChange:75
72 |
73 | handleChange({ event, id }) {
74 | const { data } = this.state;
> 75 | data[id] = event.target.value;
| ^ 76 | this.setState({data})
77 | }
78 |
The goal is to implement an edit function for the table where users can update information and trigger API calls to reflect those changes.