title: React Js, adding new object to an array
body: <p>I have a text field and a radio button.</p>
  
  <p>I am making an object of these two values and putting inside an array, so that i can store this in Mongo DB.</p>
  
  <p>I am constructing an array of objects and trying to iterate for showing the details in a table.</p>
  
  <p>Not able to displaying the details.</p>
  
  <p>Help needed for this.</p>
  
  <pre><code> export class AddColumns extends React.Component{
  
    constructor(props) {
        super(props);
          this.state={
              newItemInput: '',
              selectedValue: '',
              buyItems :[],
              object : {}
          }
        }
  
    handleChange=(event)=&gt; {
      this.setState({
        ...this.state,
        selectedValue: event.target.value
      });
    };
  
    change (event){
      this.setState({
        [event.target.name]:event.target.value
      });
    };
  
  addItem(e){
      e.preventDefault();
  
      const newItemInput = this.state.newItemInput;
      const newRadioValue = this.state.selectedValue;
      const obj = {'item':newItemInput, 'columnType':newRadioValue};
      this.state.buyItems.push(obj);
      console.log(this.state.buyItems);       
    }
  
    render(){
      const {buyItems,message} = this.state;
      return (
        &lt;div className="container"&gt;
            &lt;form className="form-inline" onSubmit={(e) =&gt; {this.addItem(e)}}&gt;
              &lt;div className="form-group"&gt;
                &lt;label className="sr-only" htmlFor="newItemInput"&gt;Add New Item&lt;/label&gt;
                &lt;input type ="text" ref ={input =&gt; this.newColumn = input} name="newItemInput" placeholder="Modules" value = {this.state.newItemInput} className="form-control" 
                        id="newItemInput" onChange={event =&gt; this.change(event)}/&gt;
              &lt;/div&gt;
  
              &lt;div className="k-form-field"&gt;
                &lt;input type="radio" name="radio" value="radio1" className="k-radio" onChange={this.handleChange}/&gt;
                &lt;label className="k-radio-label"&gt;RadioButton 1&lt;/label&gt;
  
                &lt;input type="radio" name="radio" value="radio2" className="k-radio" onChange={this.handleChange}/&gt;
                &lt;label className="k-radio-label"&gt;RadioButton 2&lt;/label&gt;
  
              &lt;div className="form-group"&gt;
                &lt;button type="submit" className="btn btn-primary"&gt;Add&lt;/button&gt;&lt;p&gt;{this.state.messgae}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;div className="content"&gt;
            &lt;div&gt;
                    {
                      buyItems.map((rowdata,i) =&gt; { 
                          &lt;div&gt;
                            {rowdata.item}
                          &lt;/div&gt;
                      })
                    }
              &lt;/div&gt;      
          &lt;/div&gt;
        &lt;/div&gt;
        );
    }
  }
  </code></pre>