Parent scope not triggering child rerender in React

Issue

i have a prent comp and a child cmponent. as follows

parent

export class ExpressionMenu extends Component {
 
  constructor(props) {
    super(props)
  }

  state = {
    apiArray: [],
  }

  updateStateFromChild = (arrayType, propertyType, value) => {
    let { apiArray } = this.state
    let currentArray = []
    let idx = apiArray.findIndex((q)  => q.id === id)
    currentArray = apiArray
    
    switch(propertyType) {
      case 'updateObject': {
        currentArray = value
        break;
      }
    }

    this.setState({
      apiArray: currentArray 
    })
  }
  

  render () {
    const {
     apiArray
    } = this.state

    return (
      <React.Fragment>
        <div >
          <div>
            <ApiPanel 
                apiArray={apiArray} 
                updateStateFromChild={this.updateStateFromChild} 
            />
            
         </div>  
        </div>
      </React.Fragment>
    )
  }
}  
  ExpressionMenu.propTypes = {
    styleOverride: PropTypes.object,
    eventHandler: PropTypes.func,
  };
  
  export default ExpressionMenu;

child

export class ApiPanel extends Component {
  constructor(props) {
    super(props),
  }

  removeApi = (id) => {
    let { apiArray } = this.props
    apiArray = apiArray.filter((q) => q.id !== id);
    this.props.updateStateFromChild('api', 'updateObject', apiArray)
  };

  addApi = () => {
    let { apiArray } = this.props
    const id = uniqid();
    let obj = {}
    obj.id = id
    apiArray.push(obj)
    this.props.updateStateFromChild('api', 'updateObject', apiArray)
  };

  render() {
    const { apiArray } =  this.props
   
    return (
      <React.Fragment>
        {
          apiArray.map((apiObj, i) =>
           <div key={i} >
            <span onClick={() => this.removeApi(apiObj.id) } className={[classes.deleteRow,'material-icons'].join(' ')}>
                close
              </span>
              
                <div>
                  <label><b>Hi</b></label>
                </div>
              
               <div onClick={this.addApi}>+Add Api</div>
        }
       
      </React.Fragment>
    )
  }
}

ApiPanel.propTypes = {
  apiArray: PropTypes.array,
  updateStateFromChild: PropTypes.func
}

export default ApiPanel

Now when i call addApi(), it updates the parent but doesnt rerenders the child.
But when i call removeApi() , it updates parent as well as rerenders the child component properly.

in the first case when i manually reload the componnt i can see the change.

Dont understand why this is happening

Solution

Try to change your addApi function.

addApi = () => {
    let { apiArray } = this.props
    this.props.updateStateFromChild('api', 'updateObject', [...apiArray, {id : uniqid()} ])
  };

You need to return an enriched copy of your array

Answered By – Pierre

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0