inputs mapped from object update onChange React.JS
<p>I am trying to map out an object into inputs that can be updated onChange. everything works except the component never updates after this.setState().</p>

<pre><code>var ItemModal = React.createClass({
  getInitialState: function(){
    return {
      title: "",
      cooktime: "",
      ingredients: [],
      instructions: ""
    }
   },  

  componentWillReceiveProps: function(nextProps) {
     this.setState({
       title: nextProps.inputVal.title,
       cooktime: nextProps.inputVal.cooktime,
       ingredients: nextProps.inputVal.ingredients,
       instructions: nextProps.inputVal.instructions
     });
},

  handleChange: function(event){
    var change = {};
    console.log(event.target.id + " " + event.target.value)
    change[event.target.id] = event.target.value;
    console.log(change);
    this.setState(change);
},

  render: function (){
    var handleChange = this.handleChange;
    var inputVal = this.props.inputVal;
    return (
      &lt;div id="itemModal"&gt;
        &lt;div id="modalContent"&gt;
           {
            Object.keys(this.props.inputVal).map(function(curr){
              return &lt;input id={curr} placeholder= "Recipe Name Here!" type="text" value= {inputVal[curr]|| ""}  onChange = {handleChange.bind(this)}/&gt;   
        })
       } 
        &lt;/div&gt;
       &lt;/div&gt;  
     );
   }
 });
</code></pre>

<p><a href="http://codepen.io/Brayn/pen/VKWvAz?editors=0010" rel="nofollow">link to code</a></p>

<p>goto ItemModal code I am mentioning is in there.</p>