Reload react-table on event

Question

I'm using React as a display tool for my data, coupled with the framework react-table to list my data.

I have a field to create a new object in my data base but I can't reload the table without leaving my view.

My question, how to reuse the function to load the data? (source code)

class ElementCRDN extends React.Component {
    constructor(props) {
        super(props);
        this.handleCreation = this.handleCreation.bind(this);
        this.handleInput = this.handleInput.bind(this);
        this.state = {
            data: [], // the data retrieved from the server
            pages: -1,
       };
   }

   handleCreation(event) {
        Axios.post('/createElement', {
            // data
        }).then(() => {
            // Ask for reload
       });
       event.preventDefault();
   }

   render() {
       <form onSubmit={this.handleCreation}>
           // input to create object
       </form>
       <ReactTable
          data={this.state.data}
          pages={this.state.pages}
          loading={this.state.loading}
          manual
          columns={columns}
          onFetchData={(state) => { // function to retrieve the data
              this.setState({ loading: true });
              Axios.post('/listElements', {
                  page: state.page,
                  pageSize: state.pageSize,
                  sorted: state.sorted,
                  filtered: state.filtered,
              }).then((res) => {
                  this.setState({
                  data: res.data,
                  loading: false,
                  });
              });
          }}
       />
   }

Thank you for reading

I posted an issue on the git too, I was missing a key feature of React: it does not rerender child component if their state does not change. @Explosion Pills was right, I needed to understand why — IPessers
– IPessers, Commented May 9, 2018 at 10:20

Explosion Pills · Accepted Answer · 2018-05-07 16:21:16Z

2

I would simply add the element to your data upon successful creation. You can use this.setState again with the new data value you were posting with createElement.

async handleCreation(event) {
  this.setState({ loading: true });
  await Axios.post('/createElement', data);
  this.setState({ data: this.state.data.concat(data), loading: false });
}

answered May 7, 2018 at 16:21

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IPessers Over a year ago

This would work in most cases, but for me, the backend alter the data which prevent me from simply insert the sent data in the array.

Collectives™ on Stack Overflow

Reload react-table on event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related