React prevent change state in child component when parent component update

Question

I have 2 component, one parent, another is child component

in my parent component I'm using react-table and inside using some component where defined react-table like

Filter: props => <FilterInnerComponent {...props} />, 

problem is in my child component I'm changing some state to true or false on click to some button. And when my data changes in my parent component. My child component too re-rendering and child component state back to default.

How to prevent this and keep the state of child component on last changes when parent component state change.

i research and see some resolution about :

shouldComponentUpdate(nextProps, nextState) {
}

but I don't know how using it. I tried this but not helped.

shouldComponentUpdate(nextProps, nextState) {
   return this.state.openTextBox != nextState.openTextBox
}

here is where i'm using my onClick function where i change my openTextBox value on my child component

changeFilterType(event) {
    if(filterType !== "All"){
        this.state.openTextBox = true
      }
      else{
        this.state.openTextBox = false
      }
 }

Answer 1

Please note that you are comparing this.state & nextState, rather than your this.props & nextProps. Your child's state shouldn't be changed by your parent, its props should.

You can either use react's PureComponent or shouldComponentUpdate(nextProps, nextState).

The differences are that PureComponent performs a shallow comparison of props and state. Whereas, shouldComponentUpdate gives you more control over comparing deep props structures.

You can declare your parent component as PureComponent. If it didn't help, try using shouldComponentUpdate like so:

shouldComponentUpdate(nextProps, nextState) {
   return this.props.openTextBox != nextProps.openTextBox
}

Answer 2

Although it is possible to save the changed state in the child component and use that to override a prop from the parent component, consider to let the button trigger an event handler that changes the state on a higher level so that the new value comes back in the child component simply as a new prop value.

Answer 3

As I can make out from your piece of code, you are using shouldComponentUpdate in the parent component.

Rather than I would say, use that in the child component. Assuming that you are only changing the boolean state value in the parent component and other data remains as it is in the logic. You can then use the object comparison method to compare between 2 props instances in the component as follows -

return this.state.openTextBox != nextState.openTextBox

If the openTextBox is just a primitve value, you can also use the Pure Component of react.

And further in onclick function you need to use something like this -

changeFilterType(event) {
 if(filterType !== "All"){
    this.setState({openTextBox: true});
  }
  else{
    this.setState({openTextBox: false});
  }
}