Material-Table would not add row

Question

Fairly new to JS, React. Trying to use Material-table with a add row button. Add row would not add the row. One refreshing the rows are reset. I'm pretty sure I'm doing something wrong with setting/ updating the state.

export default function App() {
  return (
    <div className="App">
      <Tabl
        obj={{
          a: "a",
          items: [{ x: 1 }, { x: 2 }, { x: 3 }]
        }}
      />
    </div>
  );
}

class Tabl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: props.obj
    };
    console.log(JSON.stringify(this.state.obj));
  }

  updateState(newData) {
    this.setState({
      obj: [...this.state.obj.items, newData]
    });
  }

  render() {
    const currObj = this.state.obj;
    const column = [
      {
        title: "a",
        field: "x"
      }
    ];

    const tableIcons = {
      Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
      Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
      Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />)
    };

    return (
      <MaterialTable
        data={currObj.items}
        columns={column}
        icons={tableIcons}
        options={{
          search: false,
          paging: false
        }}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                this.updateState(newData);
                resolve();
              }, 1000);
            })
        }}
      />
    );
  }
}
export default Tabl;

Thanks in advance.

`updateState` defenitely seems to be updating the state. But I believe the next render is using the old state and not the updated state — Neo, Nov 13 '20 at 08:49

score 2 · Answer 1 · answered Nov 13 '20 at 08:42

2

this.updateState method not binding to class.

You can bind in constructor like this,

constructor(props) {
    super(props);
    this.state = {
      obj: props.obj
    };
    console.log(JSON.stringify(this.state.obj));
    this.updateState= this.updateState.bind(this);
  }

answered Nov 13 '20 at 08:42

Niyazi Ekinci

87
1
8

1

Your state model is { a: '..', items: [...] } and you are trying to change obj : [...this.state.items, newData]. Maybe it could work this -> obj : {...this.state.obj, items: [...this.state.items, newData]} – Niyazi Ekinci Nov 13 '20 at 08:51
1

Thanks for the hint. `obj: { ...this.state.obj, items: [...this.state.obj.items, newData] }` worked. – Neo Nov 13 '20 at 08:55

Material-Table would not add row

1 Answers1