0

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;
Kevin
  • 55
  • 2
  • 11
  • Hi, The problem in here is not related to "setState doesn't update the state". The problem is React is not rendering the whole sentence as I tried to demonstrate in the topic. Please unmark as an exact duplicate of an existing question. Thanks – Kevin Feb 03 '18 at 18:36

1 Answers1

0

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}
    })
    );
}

  }
Chaitanya Mankala
  • 1,594
  • 17
  • 24
  • hmm it seems not to work. I need to double click to get the new inputs. The first click, the old state is rendered. The new state is rendered by the second click :( – Kevin Feb 03 '18 at 10:55
  • can you change to onChange={this.inputChanged.bind(this)} and try what happens? – Chaitanya Mankala Feb 03 '18 at 11:02
  • I tried to change to onChange={this.inputChanged.bind(this)}. The last character is still missing after rendering. Here is my screenshot. https://prnt.sc/i9l0rk – Kevin Feb 03 '18 at 14:51