React Event Handler. Adding values to array

Question

Why Hello Javascript Wizards,

I am really starting to dive into React and have to say, I find it very interesting. However, I am having an issue in regards to taking the value from an input form, and adding it into an array. I am building a small to do app(how creative of me), and I am attempting to add the value in the input field to an array each time the add button is clicked.

Here's the catch, it works just fine, just not on the first submit of the button. For example, lets say I boot up the app, type "Hello" into the input field, and hit enter. As you can see in my code, I have a console.log setup at the end of the function so I can see what is going on each time the button is clicked.

The first time the button is clicked, all I get logged to the console is "[]", on the next click, I then see what I wanted, where I get a log saying, ["Hello"]. Any other input I add after that gets added just swimmingly to the array. I feel as there has to be something quite minute going on that may just require a more seasoned pair of eyes. I would appreciate any feedback on a possible solution, and perhaps any ways I could make the code better.

Here is a quick screenshot of the console. The first click starts at the [] part.

import React, { Component } from 'react';
import ListItem from './list-item';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { tasks: [] };
    this.addTask = this.addTask.bind(this);
  }

  addTask(event) {
    event.preventDefault();
    var form = this._input.value;
    var allTasks = this.state.tasks.concat([form]);
    this.setState({tasks: allTasks});
    console.log(this.state.tasks);
  }

  render() {
    return (
      <div className="app-main">
        <div className="col-sm-12 text-center">
          {/* App Title */}
          <h1>Task App</h1>
          <div id="formWrapper">
            {/* Start of Form */}
            <form onSubmit={this.addTask}>
              <input ref={(el) => this._input = el} />
              <button type="submit" className="btn btn-md btn-primary">Add</button>
            </form>
            {/* List Item */}
            <ListItem tasks={this.state.tasks} />
          </div>
        </div>
      </div>
    );
  }
}

bitten · Accepted Answer · 2016-08-19 19:09:53Z

2

As per the docs,

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

From the notes section of setState, my emphasis in bold. So setState doesn't immediately mutate state. Although, when setState has merged the new state in, it will always call render again so ListItem will get the new task just not synchronously, or perhaps, not immediately.

Move your console.log down into your render function and you'll see the difference:

...
<ListItem tasks={this.state.tasks} />
{console.log(this.state.tasks)}
...

answered Aug 19, 2016 at 19:09

bitten

2,5532 gold badges28 silver badges46 bronze badges

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

2 Comments

Michael Parker Over a year ago

Keep in mind that setState takes a callback function as an optional second parameter. If OP wants to see the state change immediately after it happens, he can pass a function that logs the new state.

Dan Zuzevich Over a year ago

You two both deserve golden tickets to the Willy Wonka Javascript Factory. Both of these answers were extremely useful, and work 100%.

Collectives™ on Stack Overflow

React Event Handler. Adding values to array

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