update child component when parent component changes

Question

I'm kind of new to React js. I have two questions. Here I go

Question 1

I wanted to update(re-render) the child component when I update(re-render) the parent component. After some googling, I found out that when the props are changed and we call the forceUpdate function only the parent component is updated not the child component. If I wanted to update the child component I needed to needed to use setState function and set something in the state to update the child. But the problem that I'm facing is that when I set state in the parent component the child component is not updated. The render method of the child is not called. Can somebody please tell me what is it that I'm doing wrong?

Parent.jsx

class Application extends React.Component {
  isBindEvents=false;



  componentWillMount(){
    let {dispatch} = this.props;

  dispatch(getCompanyInfo( "abcd.com", (res) => { // THIS IS A ACTION CALL


    this.props.user = res.data.user;       
    this.setState({name:res.data.user.name})

    this.forceUpdate()

  }))
}

 render(){


return ( <div className='react-wrapper'>
    <ABCD {...this.props} /> // THIS IS THE CHILD COMPONENT WHICH I WANT TO RE-RENDER WHEN THE PARENT COMPONENT CHANGES
    <div >

      <div id="body" >
        <div>
        <div >
          <div className="container-fluid">
            {this.props.posts}
          </div>
        </div>
        </div>
      </div>
    </div>

</div>)
  }
}

export default connect(mapStateToProps)(Application)

CHILD.JSX

class ABCD extends React.Component {



  render() {



    let isShowUser = this.props.user 
      ? true
      : false;



    return (
      <div> Here is the user name {isShowUser? this.props.user.name: 'user not present'} </div>
    );
  }
}


export default connect(mapStateToProps)(ABCD);

Now what I'm doing is that when the application component is mounting I generate an ajax call to my backend server and when it return it updates the props and I set the state so that that child component is also rerendered but the child component is not re-rendering. Can somebody please tell me what's is going wrong.

Question 2

The next question is related to react router I'm using react router for the routeing.This is how I'm using router 

module.exports = {
  path: '/',
  component: Application,

  indexRoute: require('./abcd'),
  childRoutes: [
    require('./componentTwo'),
    require('./componentOne'),
  ]
};

Now let's suppose I'm going to component Two route which will render component Two and I generate a ajax call in application component and on the basis of the data returned by the ajax call I set some props in the application component and I also want the component Two to re-render as soon some props are changed in application is there any way to do that

Thanks any help will be appreciated

Answer 1

this.props.user = res.data.user; 

You can't assign to props. Props are passed from a parent. Set the user in the state and pass the state to your child component like so:

<ABCD {...this.props} user={this.state.user} />

In your child component you will now have access to this.props.user . Also the this.forceUpdate() will not be needed then.