I am trying to add dynamic key/value pair to an initial object with the appendInput() function.

Initial object:

constructor(props) {

super(props);

this.state = {

  milestonesValues : {

    milestone0: dssdsad,

    milestone1: ,

    milestone2: ,

    milestone3: ,

  }

};

}

The render method:

render(){

return(

  <div>

    <main className=content>

      <form onSubmit={this.onSubmit}>

        <div className=input-wrap>

          <label>{'What are the basic steps?'}

            {Object.keys(this.state.milestonesValues).map( (milestone, index) =>

              <input

                key={milestone}

                placeholder={`${index+1}.` }

                type=text

                name={milestone}

                value={this.state.milestonesValues[milestone]}

                onChange={this.handleInputChange} />

              )}

          </label>

          <button onClick={ () => this.appendInput() }>

            {+ ADD MILESTONE}

          </button>

        </div>

       </form>

     </main>

   </div>

);

appendInput() function:

  appendInput() {

var objectSize = Object.keys(this.state.milestonesValues).length;

var newInput = `milestone${objectSize}: ,`;



console.log(newInput);

this.setState({

  milestonesValues: this.state.milestonesValues.concat([newInput])

});

}

and I just can't add the new generated key/value to that initial object.

Can someone help, please?