title: passing and displaying array of objects in react js
body: <p>I have two input boxes which will take input from users and on click of a button will save the input in an array and display it on the screen.</p>
  <p>The react code that I have written for the same is like this:</p>
  <pre><code>class Todo extends React.Component{
    constructor(props){
      super(props);
      this.state={
        input:[],
        desc:'',
        expense:'',
        list:[]
      }
      this.save=this.save.bind(this);
      this.changeDesc=this.changeDesc.bind(this);
      this.changeExpense=this.changeExpense.bind(this);
    }
    changeDesc(e){
      this.setState({
        desc:e.target.value
      })
    }
    
    changeExpense(e){
     this.setState({
        expense:e.target.value
       })
    }
    save(saveText){
      var list=this.state.list;
      list.push({
        text:saveText,    
      })
      this.setState({
        list:list,
        desc:'',
        expense:''
      })
      //console.log(input);
    }
    render(){
           return(
             &lt;div&gt;
             &lt;Save saveText={this.save} text={this.state.input}/&gt;
             &lt;Display list={this.state.list}/&gt;
               &lt;/div&gt;
            )
    }
  }
  class Save extends React.Component{
    constructor(props){
      super(props);
      this.state={
        input:this.props.text
      }
      this.save=this.save.bind(this);
    }
    save(){
      var input=this.state.input;
      var desc=document.getElementById(&quot;desc&quot;).value;
      var expense=document.getElementById(&quot;expense&quot;).value;
      input.push(desc,expense);
      this.props.saveText(input);
      console.log(this.props.saveText);
      this.setState({
        input:[]
      })
    }
    render(){
      return(
        &lt;div&gt;
          &lt;input type='text' id=&quot;desc&quot; onChange={this.changeDesc}/&gt;
          &lt;input type=&quot;text&quot; id=&quot;expense&quot; onChange={this.changeExpense}/&gt;
          &lt;input type=&quot;button&quot; value=&quot;save&quot; onClick={this.save}/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  class Display extends React.Component{
    constructor(props){
      super(props);
      this.state={
        todos:[]
      }
    }
    componentWillReceiveProps(nextProps){
      this.setState({
        todos:nextProps.list
      })
    }
    render(){
      var renderList=this.state.todos;
      var listElements=[];
      for(var i=0;i&lt;renderList.length;i++){
      listElements.push(renderList[i]);
      console.log(listElements);
      }
      return(
        &lt;div&gt;{listElements}&lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;Todo/&gt;,document.getElementById('root'));
  </code></pre>
  <p>But this code is not displaying anything on the screen and I am getting errors like this for some given input.<a href="https://i.stack.imgur.com/ZuNLh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZuNLh.png" alt="Error" /></a></p>
  <p>The Codepen link for the same is: <a href="https://codepen.io/asinha/pen/yXrEYv?editors=0010" rel="nofollow noreferrer">Link</a></p>
  <p>What is wrong with the  react code?</p>