title: How to make only one element to change onHover (ReactJS)
body: <p>so I'm trying to change  element color onHover by changing state, the problem is that all of the elements change, because of the state. 
  How to do that only one  element would change?</p>
  
  <p>link to the problem:
  <a href="https://repl.it/@RokasSimkus/TediousTestyOctagons" rel="nofollow noreferrer">https://repl.it/@RokasSimkus/TediousTestyOctagons</a></p>
  
  <pre><code>class App extends Component {
      state={
      hover:false
    }
    render() {
      let onHover = () =&gt;{
    this.setState({hover:true})
  };
  let onOut = () =&gt;{
    this.setState({hover:false})
  };
      return (
        &lt;div className="App"&gt;
      &lt;a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'red', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}&gt;CHANGE LANGUAGE&lt;/a&gt;
      &lt;br/&gt;
          &lt;a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'orange', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}&gt;DO SOMETHING ELSE&lt;/a&gt;
          &lt;br/&gt;
                  &lt;a onMouseOver={onHover} onMouseOut={onOut} style={this.state.hover? {color:'grey', fontSize:'50px', cursor:'pointer'}: {color:'blue', fontSize:'50px', cursor:'pointer'}}&gt;AND ELSE&lt;/a&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>