title: OnClick, apply style on one array element
body: <p>When I type something in my textarea, and then click on the button, this new element is stocked inside an array and displayed in a list in my react app. I want the array's elements to be crossed when I click on them.</p>
  
  <p>I've written a function to change the state of 'crossed' to its opposite when i click on the element, and then the style of the elements would change depending on whether it's true or false.</p>
  
  <p>app.js: </p>
  
  <pre><code>import React from 'react';
  import Tasks from './tasks.js';
  import Item from './component.js';
  import './App.css';
  
  
  
  class App extends React.Component {
    state = {
      todolist: [],
      crossed: false
    }
  
    addData(val) {
      this.setState({ todolist: this.state.todolist.concat(val) },
        () =&gt; console.log(this.state.todolist))
    }
  
  
    cross() {
      this.setState({ crossed: !this.state.crossed },
        () =&gt; console.log(this.state.crossed))
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Tasks onClick={value =&gt; this.addData(value)} /&gt;
  
          {
            (this.state.crossed) ? (&lt;ul&gt;
            {this.state.todolist.map((e) =&gt; {
            return  &lt;Item
                item={e}
                onClick={(e) =&gt; this.cross(e)}
                style={{ textDecoration : 'line-through' }} /&gt;}
                )
                }
          &lt;/ul&gt;) : (
            &lt;ul&gt;
            {this.state.todolist.map((e) =&gt; {
             return &lt;Item
                item={e}
                onClick={(e) =&gt; this.cross(e)}
                 /&gt;}
                )
                }
          &lt;/ul&gt;
          )
          }
        &lt;/div&gt;
  
      );
    }
  }
  
  
  
  export default App;
  </code></pre>
  
  <p>component.js:</p>
  
  <pre><code>import React from 'react'
  
  class Item extends React.Component{ 
   render(){ return(
          &lt;li onClick={this.props.onClick} style={this.props.style}&gt;{this.props.item}
          &lt;/li&gt;
      );
  }}
  export default Item
  </code></pre>
  
  <p>tasks.js : </p>
  
  <pre><code>import React from 'react'
  
  
  class Tasks extends React.Component {
  
      constructor(props) {
          super(props)
          this.state = {
              value: '',
          }
      }
      handleChange = e =&gt; {
          this.setState({ value: e.target.value })
      }
  
      render() {
          return (&lt;div&gt;
              &lt;textarea value={this.state.value} onChange={this.handleChange} &gt;&lt;/textarea&gt;
              &lt;button onClick={() =&gt; this.props.onClick(this.state.value)}&gt;Add task&lt;/button&gt;
          &lt;/div&gt;)
  
      }
  
  }
  
  
  
  export default Tasks
  </code></pre>
  
  <p>I want each element to be crossed on its own when I click on it, but all the elements get crossed when I click on any one of them.</p>