title: How to filter array & update state when every click in React
body: <p>I just wonder something about updating state in React. I'm working on basic "to-do app". I created a list &amp; mapped for each element. The user can add a new element in the list and can change the status of the element.</p>
  
  <p>Now, I want the state to update for every click. For example, when the user clicked the completed button, the state is called list will be contained only completed items. I can do it. But after I update the list, I can't access default list. For example, when the user click the button;</p>
  
  <pre><code>changeView(event) {
  let clickStatus = event.target.value
  if (clickStatus = 'completed') {
  const newList = this.state.list.filter((item) =&gt; {
  return item.completed
  })
  this.setState({
  this.state.list: newList
  })
  }
  </code></pre>
  
  <p>But after this, I can't access the list that contains every item.</p>
  
  <p>This is my code:</p>
  
  <pre><code>class App extends React.Component{
    constructor(props) {
      super(props)
      this.state = {
        list: [
          {
            'text': 'First Item',
            'completed': false
          },
          {
            'text': 'Second Item',
            'completed': false
          },
          {
            'text': 'Third Item',
            'completed': true
          }
        ]
      }
      this.handleStatus = this.handleStatus.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleSubmit(event) {
      event.preventDefault()
      const newItem = {
        'text': this.refs.new.value,
        'completed': false
      }
      this.setState({
        list: this.state.list.concat([newItem])
      })
      this.refs.new.value = ''
    }
  
    handleStatus(event) {
      const itemText = this.state.list[event.target.value].text
      const itemStatus = this.state.list[event.target.value].completed
      const newItem = {
        'text': itemText,
        'completed': itemStatus ? false : true
      }
      const list = this.state.list
      list[event.target.value] = newItem
      this.setState({
        list
      })
    }
  
    render() {
  
      const Item = this.state.list.map((item, index) =&gt; {
        return &lt;li onClick={this.handleStatus} className={(item.completed) ? 'done' : 'default'} value={index} status={item.completed}&gt;{item.text}&lt;/li&gt;
      })
  
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input type='text' ref='new'&gt;&lt;/input&gt;
            &lt;button type='submit'&gt;Add&lt;/button&gt;
          &lt;/form&gt;
          &lt;ul&gt;
            {Item}
          &lt;/ul&gt;
          &lt;div&gt;
            &lt;button
              value='all'
              type='submit'&gt;All
            &lt;/button&gt;
            &lt;button
              value='completed'
              type='submit'&gt;Completed
            &lt;/button&gt;
            &lt;button
              value='pending'
              type='submit'&gt;Pending
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('app'))
  </code></pre>