title: Displaying multiple input fields in Reactjs
body: <p>I want to todolist by Reactjs. I would like to display 2 input fiels: Description and Date. I create 2 strings, 1 array, and 1 object. My idea is 2 strings will be added to the object. The object will be inserted to the array. However, I am not able to display full words for my todo list. For example:
  I type: test for description and 3456 for date. The result is Date 345. Missing number "6". Please check my uploaded image. Thus, The problem in here is not related to "setState doesn't update the state". 
   <a href="https://i.stack.imgur.com/o5wtp.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        yourDescription: '',
        yourDate: '', 
        todos: [],
        object_todo:{
          item_des: '',
          item_date: ''
        }};
    }
    inputChanged = (event) =&gt; {
      event.preventDefault();
      this.setState({
        [event.target.name]: event.target.value,
        object_todo:{item_des: this.state.yourDescription, item_date: this.state.yourDate}
      });
    }
   
    addTodo = (event) =&gt; {
      event.preventDefault();
      this.setState({
        object_todo:{
            item_des:this.state.yourDescription,
            item_date:this.state.yourDate
        },
         todos:[...this.state.todos, this.state.object_todo]
        // todos:[...this.state.todos, this.state.yourDescription,this.state.yourDate]
      });
      console.log(this.state.object_todo.item_des)
      console.log(this.state.object_todo.item_date)
      console.log(this.state.yourDescription,this.state.yourDate)
      // console.log(this.state.todos)
  
    }
   
    render() {
      
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;h2&gt;Simple Todolist&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;form onSubmit={this.addTodo}&gt;
              Description:&lt;input type="text" onChange={this.inputChanged} name="yourDescription" value={this.state.yourDescription}/&gt;
              Date:&lt;input type="text" onChange={this.inputChanged} name="yourDate" value={this.state.yourDate}/&gt;
              &lt;input type="submit" value="Add"/&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;/tr&gt;
                    {this.state.todos.map((item, index) =&gt; 
                      // &lt;tr key={index}&gt;&lt;td&gt;{item}&lt;/td&gt;&lt;/tr&gt;)}
                      &lt;tr key={index}&gt;&lt;td&gt;{item.item_date}&lt;/td&gt;&lt;td&gt;{item.item_des}&lt;/td&gt;&lt;/tr&gt;)}
              &lt;/tbody&gt;
              
            &lt;/table&gt;
           
          &lt;/div&gt;          
        &lt;/div&gt;    
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>