title: How to remove item from an array through index in React
body: <p>I was practicing todo list in React and I faced a problem that I don't understand. Can't delete the item from the array that is in my state. I'm passing the index to my delete function and than I was trying to filter through the array to set a new State.  </p>
  
  <p>Here is the code of my App component:</p>
  
  <pre><code>class App extends React.Component {
    state = {
      tasks : []
    }
  
    addToScreen = (task) =&gt; {
      const tasks = { ...this.state.tasks } 
      tasks[`task${Date.now()}`] = task
      this.setState(prevState =&gt; ({
        tasks: [...prevState.tasks, task]
      }))
    }
  
  
    deleteTask = index =&gt; {
      const reducedArr = this.state.tasks.filter( (item) =&gt; {
        return item[index] !== item 
      })
      this.setState({
        tasks: reducedArr
      })
    }
  
  
    render() {
      return (
        &lt;&gt;
          &lt;Input addToScreen={this.addToScreen}/&gt;
          &lt;Screen tasks={this.state.tasks} deleteTask={this.deleteTask}/&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  
  <p>And here is my Screen component:</p>
  
  <pre><code>class Screen extends React.Component {
    render() {
      return ( 
        &lt;ul&gt;
          {this.props.tasks.map((key, index) =&gt; &lt;li key={index}&gt;{key}
          &lt;button onClick={() =&gt; this.props.deleteTask(index)}&gt;x&lt;/button&gt;
          &lt;/li&gt;)}  
        &lt;/ul&gt;
      )
    }
  }
  </code></pre>
  
  <p>So it when you press the button on my screen component it should remove the specific value from the state. Thanks for help or any tips!</p>