title: Console.log() after setState() doesn't return the updated state
body: <p>I've created a simple todo list to learn react and i'm trying to add some additional features. At the moment i'm trying to add buttons that toggle the list of items, so it either shows all the tasks or just those that are completed. </p>
  
  <p>I've written a function to change the state of my visabilityFilter so I can later use this to toggle the items in the list, but it isn't behaving how it should be. </p>
  
  <p>I console log the visabilityFilter variable but it always shows the wrong state before changing to the correct state. e.g. the 'show all' button will console log 'show completed' then if you press it again it will console log 'show all'</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import TodoList from './components/TodoList.js'
  import VisabilityFilter from './components/VisabilityFilter.js'
  
  export const SHOW_ALL = 'show_all'
  export const SHOW_COMPLETED = 'show_completed'
  
  class App extends Component {
    constructor (props) {
      super(props)
  
      this.state = {
        inputValues: {
          'newTodo': ''
        },
        todos: [
          {
            task: 'My First Todo',
            completed: false
          }
        ],
        visabilityFilter: SHOW_ALL
      }
  
      this.addTodo = this.addTodo.bind(this)
      this.handleInputChange = this.handleInputChange.bind(this)
      this.handleKeyUp = this.handleKeyUp.bind(this)
      this.toggleCompleted = this.toggleCompleted.bind(this)
      this.removeTodo = this.removeTodo.bind(this)
      this.checkCompleted = this.checkCompleted.bind(this)
      this.setVisabilityFilter = this.setVisabilityFilter.bind(this)
  
    }
  
    handleInputChange (e) {
        const { inputValues } = this.state
        const { id, value } = e.target
        this.setState({
          inputValues: {
            ...inputValues,
            [id]: value
          }
        })
    }
  
    handleKeyUp (e) {
      var code = e.key
          if(code === 'Enter') {
            this.addTodo(e);
          }
    }
  
    toggleCompleted (e, index) {
      const { todos } = this.state
  
      todos[index].completed = !todos[index].completed
  
      todos.sort((a, b) =&gt; b.completed - a.completed)
  
      this.setState({ todos })
    }
  
    removeTodo (e, index) {
      const { todos } = this.state
      this.setState ({ todos: todos.filter((todo, i) =&gt; i !== index) })
    }
  
    addTodo (e) {
        const { todos, inputValues } = this.state
        const { dataset } = e.target
  
        if (inputValues[dataset.for] === '') return
  
        const newTodo = { task: inputValues[dataset.for], completed: false }
        todos.push(newTodo)
  
        this.setState({
          todos,
          inputValues: { ...inputValues, [dataset.for]: '' }
        })
    }
  
    checkCompleted (e, index) {
      const { todos } = this.state
      return { todos } &amp;&amp; todos[index].completed
    }
  
    setVisabilityFilter (e) {
      const { visabilityFilter } = this.state
      const { dataset } = e.target
  
      this.setState({
        visabilityFilter: dataset.for
      })
  
      console.log ({ visabilityFilter })
    }
  
    render() {
      const { todos, inputValues, visabilityFilter } = this.state
      return (
        &lt;div className="App"&gt;
          &lt;TodoList
            todos={todos}
            inputValues={inputValues}
            addTodo={this.addTodo}
            handleInputChange={this.handleInputChange}
            removeTodo={this.removeTodo}
            toggleCompleted={this.toggleCompleted}
            handleKeyUp={this.handleKeyUp}
            checkCompleted={this.checkCompleted}
          /&gt;
          &lt;VisabilityFilter setVisabilityFilter={this.setVisabilityFilter} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>VisabilityFilter.js</p>
  
  <pre><code>import React from 'react'
  import { func } from 'prop-types'
  
  import { SHOW_ALL, SHOW_COMPLETED } from '../App'
  
  const VisabilityFilter = props =&gt; {
    return (
      &lt;div&gt;
        &lt;button data-for={SHOW_COMPLETED} onClick={ props.setVisabilityFilter } &gt;
          Show Completed Tasks
        &lt;/button&gt;
        &lt;button data-for={SHOW_ALL} onClick={ props.setVisabilityFilter }&gt;
          Show All Tasks
        &lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  VisabilityFilter.propTypes = {
    setVisabilityFilter: func.isRequired
  }
  
  export default VisabilityFilter
  </code></pre>