CODEWITHSUNDEEP
reactjs
TyForHelpDude
TyForHelpDude

Reputation: 5002

componentWillReceiveProps not firing even props value updated

There is simple scenario I updated a value in parent which passed to child component and expected cWRP method firing but not. here code below;

Parent component:

class App extends Component {
  changeProps(){//interpreter jumps here fine..
    debugger
    this.appState.index=15 //update props value
  }
  render() {
    return (
      <div className="App">
        <EasyABC parentUpdateProps={this.changeProps} appState={this.props.appState} />
      </div>
    )
  }
}

child component:

@observer
export default class EasyABC extends Component{
    constructor(props){
        super(props)
    }
    componentWillReceiveProps(nextProps){//why its not jump here after update props in parent?
        debugger
    }
    playSound(){// when this method called, cWRP above should be invoked rigth?
        this.props.parentUpdateProps()
    }

render(){
        return(
            <div>   
                <a onClick={()=> this.playSound()}>Play Sound Again</a>

Edited: i am using mobx as state handler, but dont bother with it

Upvotes: 1

Views: 639

Answers (3)

Travess
Travess

Reputation: 1

You have to dereference the observable value in the render function or it will not fire the will receive props because the component is not actually using it to render.

You could just do something like this:

render() {
  if (this.props.appState.index) {
    return <div>Play Sound Again</div>;
  }

  return <div>Play Sound</div>;
}

It really doesn't matter how you use it, but that you access it within the call stack of the render method.

Upvotes: 0

Fawaz
Fawaz

Reputation: 3560

You need to update the state of the component using setState and use the same for passing it to child component

class App extends Component {
  constructor() {
    this.state = {
      index: 0,
    };
    this.changeProps = this.changeProps.bind(this);
  }

  changeProps(){
    this.setState({
      index: 15,
    });
    // this will update state (not props)
  }
  render() {
    return (
      <div className="App">
        <EasyABC
          parentUpdateProps={this.changeProps}
          appState={...this.state}
        />
      </div>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 1

Murat Karag&#246;z
Murat Karag&#246;z

Reputation: 37594

You are updating the state wrongly. You have to use setState e.g.

changeProps() {
    this.setState({
        index: 15
    });
}

Upvotes: 1

Related Questions