React Material UI更新TextField值

Question

I start the session like this

state = {
    firm: null,
    office: null,
    salesCode: null,
    account: null
}

I have each TextField showing like this:

<TableCell>
    <TextField
        id="standard-bare"
        defaultValue={items.data[i].firm}
        margin="normal"
        onChange={(e) => this.handleChange(e, items.data[i].id)}
    />
</TableCell>

Then I have a handleChange event

handleChange({ event, id }) {
    const { data } = this.state;
    data[id] = event.target.value;
    this.setState({data})
}

When I run and edit the text inside TextField I get the below 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 | 

I am trying to implement edit function to the table. So if user edits the text, I get the new updated information and do the API call to update the values accordingly there.

Answer 1

You are not passing an object to handleChange to extract but more of individual params so

Change

handleChange({ event, id }) {

To

 handleChange(event, id) {

Edit:

There is no data defined in state but you are accessing it and trying to set input value to the data object by id which isn't correct. It should be something like below

     handleChange(event, id) {
        this.setState({
              [id]: event.target.value
        })
    }