title: How to change this.props in child when parent state changes in React JS?
body: <p>new to React JS here. I have a setup where I an App parent component that has a <em>initialFormInput</em> state holding a recipe object. A function is passed from the parent component to a child component called <em>EditRecipeButton</em> that can change this state to a specific recipe that is called from an edit button.</p>
  
  <p>This state in the parent is mapped to a state in a child AddRecipe component with a via <em>this.props</em> and my reasoning is that whenever the parent component state changes this state in AddRecipe changes as well. But that doesn't happen, what am I doing wrong here?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var App = React.createClass({
  
  
    getInitialState(){
  
      return{
  
        showModal:false,
  
  
        recipeKeys: [ ],
  
        recipes: [ ],
  
        initialFormInput: {name: "", ingredients: []}
  
      }
  
  
    },
  
  
    open: function(){
  
  
      this.setState({showModal:true});
  
    },
  
      close: function(){
  
      this.setState({showModal:false});
  
    },
  
    editRecipe: function(recipe){
  
      console.log(recipe);
  
      this.setState({initialFormInput: recipe}, function(){
  
        this.open();  
  
  
      });
  
  
    },
  
    render: function(){
  
      return( 
  
        &lt;div className="container"&gt;
          &lt;h1&gt;Recipe Box&lt;/h1&gt;
          &lt;RecipeList recipes = {this.state.recipes} deleteRecipe = {this.deleteRecipe} editRecipe={this.editRecipe} /&gt;
          &lt;AddRecipeButton openModal = {this.open}/&gt;
          &lt;AddRecipe closeModal = {this.close} showModal={this.state.showModal} addRecipeKey = {this.addRecipeKey} initialFormInput = {this.state.initialFormInput}/&gt;
        &lt;/div&gt;
  
      )  
  
    }
  
  
  var RecipeList = function (props) {
  
      return (
          &lt;ul className="list-group"&gt;
              {
  
            props.recipes.map( (item,index) =&gt; &lt;RecipeItem recipe={item} deleteRecipe = {props.deleteRecipe} editRecipe={props.editRecipe}/&gt; )
  
              }
          &lt;/ul&gt;  
      );
  };
  
  var RecipeItem = React.createClass({
  
  getInitialState: function(){
  
      return {displayIngredients: false}
  
  },  
  
  toggleRecipe: function() {
  
    this.setState({displayIngredients: !this.state.displayIngredients})
  
  },
  
  render: function() {
  
      return(
  
        &lt;li className="list-group-item" &gt;
        &lt;h4 onClick={this.toggleRecipe}&gt;{this.props.recipe.name}&lt;/h4&gt;
        &lt;div style={{display: this.state.displayIngredients ? 'block' : 'none'}}&gt;
        &lt;h5 className="text-center"&gt;Ingredients&lt;/h5&gt;
        &lt;hr/&gt; 
         &lt;ul className="list-group" &gt;
          {this.props.recipe.ingredients.map((item) =&gt; &lt;IngredientItem ingredient={item} /&gt;)} 
         &lt;/ul&gt; 
         &lt;ButtonToolbar&gt;
           &lt;DeleteRecipeButton deleteRecipe = {this.props.deleteRecipe} recipeName={this.props.recipe.name}/&gt;  
           &lt;EditRecipeButton editRecipe = {this.props.editRecipe} recipe={this.props.recipe}/&gt;  
         &lt;/ButtonToolbar&gt;  
          &lt;/div&gt;  
        &lt;/li&gt;
  
  
      )
  
  
  }
  
  });
  
  var IngredientItem = function(props){
  
    return (
    &lt;li className="list-group-item"&gt;
  
      &lt;p&gt;{props.ingredient}&lt;/p&gt;
    &lt;/li&gt;
  
  
    )
  
  };
  
  
  var EditRecipeButton = React.createClass({
  
    render: function(){
  
     return (
  
       &lt;Button bsStyle="default" bsSize="small" onClick={() =&gt; this.props.editRecipe(this.props.recipe)}&gt;Edit&lt;/Button&gt;  
  
     ) 
  
    }
  
  
  });
  
  
  var AddRecipe = React.createClass({
  //Form in modal to add recipe
  
    getInitialState(){
  
      return {
  
       name: this.props.initialFormInput.name, 
  
       ingredients: this.props.initialFormInput.ingredients
  
  
      };
  
    },
  
  
    getValidationStateName(){
  
      var length = this.state.name.length;
  
      if(length &gt; 0) {
  
        return "success";
  
      } else {
  
        return "error";
  
      }
  
    },
  
    getValidationStateIngredients(){
  
      var length = this.state.ingredients.length;
  
      if(length &gt; 0){
  
        return "success";
  
      } else {
  
        return "error";
  
      }
  
  
    },
  
    handleInput: function(key,e){
  
      var input = e.target.value;
  
  
      if(key === "ingredients"){
  
          input = e.target.value.split(",");  
  
      }
  
      var update = {};
  
      update[key] = input;
  
      this.setState(update, function(){
  
        console.log(this.state);
  
      });
  
  
    }, 
  
   handleSubmit(){
  
     var recipe = JSON.stringify({name: this.state.name, ingredients: this.state.ingredients});
  
     localStorage.setItem(this.state.name, recipe);
  
     var recipeObject= JSON.parse(recipe);
  
     this.props.addRecipeKey(recipeObject);
  
     this.props.closeModal();
  
     this.setState({name: "", ingredients: []});
  
  
    },
  
    render: function(){ 
  
      return (
  
        &lt;div&gt;
          &lt;Modal show={this.props.showModal} onHide={this.props.closeModal}&gt;
              &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title&gt;Add a Recipe Here&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
              &lt;Modal.Body&gt;
                &lt;form&gt;
          &lt;FormGroup controlId="formNameText" validationState = {this.getValidationStateName()}&gt;
            &lt;ControlLabel&gt;Recipe&lt;/ControlLabel&gt;
            &lt;FormControl
              type="text"
              placeholder="Give your recipe a name"
              value={this.state.name}
              onInput={this.handleInput.bind(this,'name')}
              /&gt;
            &lt;FormControl.Feedback /&gt; 
          &lt;/FormGroup&gt;  
            &lt;br/&gt;
          &lt;FormGroup controlId="formIngredientsTextarea" validationState = {this.getValidationStateIngredients()}&gt;
            &lt;ControlLabel&gt;Ingredients&lt;/ControlLabel&gt;
            &lt;FormControl
              componentClass="textarea"
              placeholder="Insert your ingredients, separated by a comma"
              value={this.state.ingredients}
              onInput={this.handleInput.bind(this,'ingredients')}
            /&gt;  
            &lt;FormControl.Feedback /&gt; 
            &lt;hr/&gt;
          &lt;/FormGroup&gt;
  
          &lt;Button bsStyle="primary" onClick={this.handleSubmit}&gt;Submit&lt;/Button&gt;
        &lt;/form&gt;  
              &lt;/Modal.Body&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
  
  
        )
    }
  
  });
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  
  });
  </code></pre>
  
  <p>So this does not change when the parent state changes:</p>
  
  <pre><code>getInitialState(){
  
      return {
  
       name: this.props.initialFormInput.name, 
  
       ingredients: this.props.initialFormInput.ingredients
  
  
      };
  
    },  
  </code></pre>