Rendering React app does not apply when adding items to an array inside a state

Question

I'm truing to make a todo-app for practicing. For some reason when I press the add button nothing happen, but then if I apply "onChange" on the input field the created todo does display in the todos list. I've been trying to find a solution for that for the last few hours, I believe I missed something... hope someone could figure it out !

App.js

class App extends Component {
  state = {
    newTask: { id: 0, task: "" },
    tasks: [
      { id: 1, task: "task1" },
      { id: 2, task: "task2" },
      { id: 3, task: "task3" }
    ]
  };

  newTask = e => {
    this.setState({
      newTask: { id: this.state.tasks.length + 1, task: e.target.value }
    });
  };

  addTask = e => {
    this.setState(prevState => {
      prevState.tasks.push(this.state.newTask);
    });
  };

  render() {
    return (
      <div className="App">
        <Header title="Todo List" />
        <Form input={this.newTask} add={this.addTask} />
        <ul>
          {this.state.tasks.map(t => (
            <Tasks task={t.task} key={t.id} />
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

const form = props => {
  return (
    <div>
      <input
        type="text"
        placeholder="Type your task here..."
        onChange={props.input}
      />
      <button onClick={props.add}>Add</button>
    </div>
  );
};

const tasks = props => {
  return <div>{props.task}</div>;
};

bohkoval · Accepted Answer · 2019-02-08 22:06:01Z

3

You doesn't return anything inside setState function in addTask. Therefore you actually update state, but do not trigger react update lifecycle.

I suppose you to try smth like this:

addTask = e => {
    this.setState(prevState => {
        return { tasks: [...prevState.tasks, this.state.newTask]};
    });
  };

answered Feb 8, 2019 at 22:06

bohkoval

3751 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rio Over a year ago

@bohkovsl thanks that fixed that. but shouldn't arrow function return automatically?

bohkoval Over a year ago

If arrow function has "concise" body (without brackets {}), it returns automatically. But because "block" body was used, you need to explicitly return. Even more, "consice" body will return array, but you must return appropriate key-value object

Collectives™ on Stack Overflow

Rendering React app does not apply when adding items to an array inside a state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related