Displaying multiple input fields in Reactjs

Question

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". enter image description here

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
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) => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value,
      object_todo:{item_des: this.state.yourDescription, item_date: this.state.yourDate}
    });
  }
 
  addTodo = (event) => {
    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 (
      <div className="App">
        <div className="App-header">
          <h2>Simple Todolist</h2>
        </div>
        <div>
          <form onSubmit={this.addTodo}>
            Description:<input type="text" onChange={this.inputChanged} name="yourDescription" value={this.state.yourDescription}/>
            Date:<input type="text" onChange={this.inputChanged} name="yourDate" value={this.state.yourDate}/>
            <input type="submit" value="Add"/>
          </form>
        </div>
        <div>
        <table>
            <tbody>
                <tr><th>Date</th><th>Description</th></tr>
                  {this.state.todos.map((item, index) => 
                    // <tr key={index}><td>{item}</td></tr>)}
                    <tr key={index}><td>{item.item_date}</td><td>{item.item_des}</td></tr>)}
            </tbody>
            
          </table>
         
        </div>          
      </div>    
    );
  }
}

export default App;

Answer 1

State dos not change instantly, this can be solve like,

      inputChanged = (event) => {
        event.preventDefault();
        this.setState({
          [event.target.name]: event.target.value,

        },()=>{
    this.setState({
          object_todo:{item_des: this.state.yourDescription, item_date: this.state.yourDate}
    })
    );
}

  }