CODEWITHSUNDEEP
reactjsmaterial-ui
Extelliqent
Extelliqent

Reputation: 1858

Updating Data in a Table React Material UI

I have a list of entries that I am displaying in a table format on the page. I plan to give user ability to edit any of the items in the list, so I display each cell inside this Table like this:

<TableCell>
     <TextField id="standard-bare" defaultValue={items.data[i].firm} margin="normal" />
</TableCell>

Then I have the below icon all the way right in that each row

<IconButton onClick={() => this.UserEdit(items.data[i])}>
     <Check color="action" />
</IconButton>

so when user clicks the Checkmark above, below function kicks in.

UserEdit(id) {
    console.log(id);
}

So ideally I need to get all the new values for these fields so I can run a API call to update the Database with that information. Right now, each time I click on check, I get old values (values these fields had when they first loaded). How can I get the new values?

Upvotes: 0

Views: 16737

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

To keep track of new/updated values you could consider the following approach:

1)introduce rowsChanges state and set it to empty to keep track of new/updated values in a table component

2)once the value in a text field is modified, save its value along with field name and row index into rowsChanges state :

handleTextFieldChange(rowIndex,change) {
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {...prevState.rowsChanges[rowIndex],[change.fieldName]: change.fieldValue}
      }
    }));
  }

where

<EditableTableCell
      row={row}
      fieldName="name"
      onCellValueChange={this.handleTextFieldChange.bind(this,index)}
/>

where EditableTableCell is a custom component introduced to extract field value from TextField on change event:

const EditableTableCell = ({ row, fieldName, onCellValueChange }) => {
  const handleTextFieldChange = e => {
    onCellValueChange({
      fieldValue: e.target.value,
      fieldName: fieldName
    });
  };

  return (
    <TableCell>
      <TextField
        onChange={handleTextFieldChange}
        id={fieldName}
        defaultValue={row[fieldName]}
        margin="normal"
      />
    </TableCell>
  );
};

3)and finally once the save button is clicked, save changes into db:

handleSave(rowIndex) {
    const rowChanges = this.state.rowsChanges[rowIndex];
    console.log("Save row changes into db...")
    //clear row changes...
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {}
      }
    }));
}

Here is a demo (fork of Simple Table example)

Upvotes: 3

Umair Farooq
Umair Farooq

Reputation: 1823

You can store data in state and update the state of component and then use state to send data to the server. You can store the data array and change the data in state based on id.

One way is to show a edit form, which will be have text field which will update data. e.g.

class MyComponent extends React.Component {
state = {
data: ['data1', 'data2'] etc
}
// onChange method call on the field change of edit modal
handleChange(event, id) {
  const { data } = this.state;
  data[id] = event.target.value;
  this.setState({data})
}
// in render method. i will be from loop
<input value={this.state.data[i]} onChange={(e) => this.handleChange(e, id)}

You can also have onChange method on table fields

Upvotes: 1

Related Questions