Is there a way to externally reset a react component to its original state

Question

I am current working with some complex stateful React components I installed through npm. For example, a react-bootstrap-table component. It accept data through its props. But it keeps a lots of states of its own, for example, which row is currently selected. I am adding a button, on clicking I would like to clear all the selected row information. Not having access to any API that can do that, I am wondering if I can totally reset the table component.

Right now I use a wrapper component that render the table based on a flag. It looks like:

class wrapper extends React.component{

  render(){
    if(this.props.flag==true) return <React-Table />;
    else return null;
      }
}

Now by toggling the flag, I can force a re-render of the table component with its original state.

I am wondering if there is a more straightforward way to do this?

score 1 · Accepted Answer · answered Jul 22 '17 at 04:39

1

After searching the react-boostrap-table API, it found a method reset (see docs):

Call reset to clean all the status on the table currently.

this.refs.table.reset();  // this.refs.table is a ref for BootstrapTable

answered Jul 22 '17 at 04:39

Dmitri Pavlutin

18,122
8
37
41

score 0 · Answer 2 · answered Jul 27 '17 at 19:45

To give a more general answer,

React does not have a general way to reset a component externally, the component should provide it if it's necessary. There are 2 ways for parent component to communicate with child component, through props, or not frequently, using ref to directly call a child method. Resetting is using the second way.

For react-bootstrap-table, there are reset() and cleanSelected() method you can call. How to call child component method.

Is there a way to externally reset a react component to its original state

2 Answers2