反応jsにオブジェクトの配列を渡して表示

Question

私は2つの入力ボックスを持っており、ユーザーからの入力を受け取り、ボタンをクリックすると入力を配列に保存して画面に表示します。

ザ・私は同じのために書かれているコードは、このようなものです反応：

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,expense); 
    this.props.saveText(input); 
    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=[]; 
    for(var i=0;i<renderList.length;i++){ 
    listElements.push(renderList[i]); 
    console.log(listElements); 
    } 
    return(
     <div>{listElements}</div> 
    ) 
    } 
} 

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

しかし、このコードが画面に何も表示されていないと私はいくつかの特定の入力のために、このようなエラーを取得しています。同じのため

Codepenリンク

は次のとおりです。 Link

反応するコードの何が問題になっているのですか？

Answer 1

あなたのリストには、iteselfが文字列の配列であるオブジェクトのテキストの配列が含まれ

また、あなたは、単に代わりに、forループ

render(){ 


    return(
     <div>{this.state.todos.map((item) => (<div>{item.text[0] + ' ' + item.text[1]}</div>))}</div> 
    ) 
    } 

CODEPEN