title: Passing value from Button to setState in array
body: <p>I am trying to created boolean filters in an array.</p>
  
  <ol>
  <li><p>If a button is "Active" (True) it should add the button name to the array ("selected").</p></li>
  <li><p>If the button is "Inactive" (false), it should remove it from the array.</p></li>
  </ol>
  
  <p>However, only some values end up in set state. I put it in a codepen:
  <a href="https://codesandbox.io/s/wpxD35Oog" rel="nofollow noreferrer">https://codesandbox.io/s/wpxD35Oog</a></p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { x } from './data.js';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        movies: x.movies,
      };
    }
    render() {
      const uniqueGenres = []
        .concat(
          ...this.state.movies.map(movies =&gt;
            movies.genres.map(genres =&gt; genres.name),
          ),
        )
        .filter((genre, i, _) =&gt; _.indexOf(genre) === i);
      return (
        &lt;div&gt;
          &lt;div&gt;
            {uniqueGenres.map(e =&gt; &lt;Filter1 key={e} result={e} /&gt;)}
            &lt;br /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class Filter1 extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        active: true,
        selected: '',
      };
    }
    handleActive = e =&gt; {
  //     this.setState(previousState =&gt; ({
  //     selected: [...previousState.selected, e.target.value]
  // }));
      console.log('pre-setState', e.target.value);
      const active = !this.state.active;
      const selected = e.target.value;
      this.setState({
        active: active,
        selected: selected,
      });
      console.log('status', this.state.active, this.state.selected);
    };
    render() {
      return (
        &lt;span&gt;
        &lt;button onClick={this.handleActive} value={this.props.result}&gt;
          {this.props.result} {}&lt;b&gt;
            {this.state.active ? 'Active' : 'Inactive'}
          &lt;/b&gt;
  
        &lt;/button&gt;
        &lt;/span&gt;
      );
    }
  }
  </code></pre>