title: React - how to add dynamic key/value pair to an object?
body: <p>I am trying to add dynamic key/value pair to an initial object with the appendInput() function.</p>
  
  <p><strong>Initial object:</strong></p>
  
  <pre><code>constructor(props) {
  super(props);
  this.state = {
    milestonesValues : {
      milestone0: "dssdsad",
      milestone1: "",
      milestone2: "",
      milestone3: "",
    }
  };
  </code></pre>
  
  <p>}</p>
  
  <p><strong>The render method:</strong></p>
  
  <pre><code>render(){
  return(
    &lt;div&gt;
      &lt;main className="content"&gt;
        &lt;form onSubmit={this.onSubmit}&gt;
          &lt;div className="input-wrap"&gt;
            &lt;label&gt;{'What are the basic steps?'}
              {Object.keys(this.state.milestonesValues).map( (milestone, index) =&gt;
                &lt;input
                  key={milestone}
                  placeholder={`${index+1}.` }
                  type="text"
                  name={milestone}
                  value={this.state.milestonesValues[milestone]}
                  onChange={this.handleInputChange} /&gt;
                )}
            &lt;/label&gt;
            &lt;button onClick={ () =&gt; this.appendInput() }&gt;
              {"+ ADD MILESTONE"}
            &lt;/button&gt;
          &lt;/div&gt;
         &lt;/form&gt;
       &lt;/main&gt;
     &lt;/div&gt;
  );
  </code></pre>
  
  <p><strong>appendInput() function:</strong></p>
  
  <pre><code>  appendInput() {
  var objectSize = Object.keys(this.state.milestonesValues).length;
  var newInput = `milestone${objectSize}: "",`;
  
  console.log(newInput);
  this.setState({
    milestonesValues: this.state.milestonesValues.concat([newInput])
  });
  </code></pre>
  
  <p>}</p>
  
  <p>and I just can't add the new generated key/value to that initial object.</p>
  
  <p>Can someone help, please?</p>