displaying JSON in react

I have parent to grandchild hierarchy in react and I am passing values as json Objects in my code.I have two input boxes which take values from user and a button which stores and displays the values onclick.

The react code for my code is:

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(
           <div>
           <Save saveText={this.save} text={this.state.input}/>
           <Display list={this.state.list}/>
             </div>
          )
  }
}
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("desc").value;
    var expense=document.getElementById("expense").value;
    input.push({"desc" : desc, "expense": expense});
    this.props.saveText({"desc" : desc, "expense": expense});
    //console.log(this.props.saveText);
    this.setState({
      input:[]
    })
  }
  render(){
    return(
      <div>
        <input type='text' id="desc" onChange={this.changeDesc}/>
        <input type="text" id="expense" onChange={this.changeExpense}/>
        <input type="button" value="save" onClick={this.save}/>
      </div>
    )
  }
}

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=[];
    var len=Object.keys(renderList).length
    for(var i=0;i<len;i++){
     listElements.push(
      <Post i={i} desc={renderList[i].desc} expense={renderList[i].expense}/>
      );
    //console.log(listElements);

    }
    return (
      <div>
      {
        listElements
      } 
      </div>
    );
  }
}

class Post extends React.Component{
  render(){
    return(
      <div>
        <span>{this.props.desc}</span>
        <span>{this.props.expense}</span>
        <span>Edit</span>
      </div>
    )
  }
}

ReactDOM.render(<Todo/>,document.getElementById('root'));

When I execute this code,I get the Output as And there are no errors in the Output. What is wrong with the logic of the above code.