title: How add onMouseOver,onMouseEnter in reactjs?
body: <p>Here, i am using onMouseOver event in react but it not works fine for me.
   I use proper way how to use, call and set State.
  Here is my code anyone please help.</p>
  
  <pre><code>import React from 'react';
  
  const style = {
      color:"black",
      fontSize:16,
      borderRadius:4,
      border: "1px solid grey",
      lineHeight: "28px",
      background: "white",
      padding: 3,
      margin:3,
  
    }
  
  
  const highlightStyle = {
      color:"black",
      fontSize:16,
      border: "1px solid grey",
      background:"lightblue",
      borderRadius:4,
      lineHeight: "25px",
      padding: 3,
      margin:5
    }
  
  export default class SplitSpansPreview extends React.Component {
      constructor(props){
          super(props)
  
          this.state = {    
              color_black: true,
              hover: false
          }
  
          this.changeColor = this.changeColor.bind(this)
          this.onHover = this.onHover.bind(this)
          this.hoverOn = this.hoverOn.bind(this)
          this.hoverOff = this.hoverOff.bind(this)
      }
      onHover() { alert("hello")
          this.setState({ hover: true });
      }
      hoverOn(){alert("hcek")
          // this.setState({ hover: true });
      }
      hoverOff(){ alert("kol")
          // this.setState({ hover: false });    
      }
      changeColor() {
          const id = this.props.atId;
          const self = this
          this.setState({color_black: !this.state.color_black}, () =&gt; {
              if(this.state.color_black){
                  self.props.getDisselectedId(id);
              } else {
                  self.props.getSelectedId(id);
              }
          });
      }
  
      createMarkup(data) {
          return {__html: data}
      }
  
      render(){
          let checkBreak = this.props.item.substring(0,4)
          if(checkBreak == '&lt;br&gt;' || checkBreak == ' &lt;br') {
              const itemLength = this.props.item.length
              if(checkBreak == '&lt;br&gt;') {
                  var item = this.props.item.substring(4,itemLength)
              } else {
                  var item = this.props.item.substring(5,itemLength)
              }
  
              if(this.props.punctuation) {
                  return(
                      &lt;span&gt;
                          &lt;br/&gt;      
                          &lt;span id={this.props.atId}
                              className = {this.props.classword}
                              style={this.state.color_black ? style: highlightStyle}
                              onClick={this.changeColor}
                              onMouseOver={this.onHover}
                          &gt;
                              {item}
                          &lt;/span&gt;
                          &lt;span className = {this.props.classword}&gt;
                              {this.props.punctuation}
                          &lt;/span&gt;
                      &lt;/span&gt;
                  )
              } else {
                  return(
                      &lt;span&gt;
                          &lt;br/&gt;      
                          &lt;span id={this.props.atId}
                              className = {this.props.classword}
                              style={this.state.color_black ? style: highlightStyle}
                              onClick={() =&gt; this.changeColor()}
                              onMouseEnter={() =&gt; this.hoverOn()} 
                              onMouseLeave={() =&gt; this.hoverOff()} 
  
                          &gt;
                              {item}
                          &lt;/span&gt;
                      &lt;/span&gt;
                  )
              }
          } else {
              if(this.props.punctuation) {
                  return(
                      &lt;span&gt;           
                          &lt;span id={this.props.atId}
                              className = {this.props.classword}
                              style={this.state.color_black ? style: highlightStyle}
                              onClick={this.changeColor}
                          &gt;
                              {this.props.item}
                          &lt;/span&gt;
                          &lt;span className = {this.props.classword}&gt;
                              {this.props.punctuation}
                          &lt;/span&gt;
                      &lt;/span&gt;
                  )
              } else {
                  return(           
                      &lt;span id={this.props.atId}
                          className = {this.props.classword}
                          style={this.state.color_black ? style: highlightStyle}
                          onClick={this.changeColor}
                      &gt;
                          {this.props.item}
                      &lt;/span&gt;
                  )
              }
          }
  
      }
  }
  </code></pre>
  
  
  
  <p>Finally i edit my code and here is my whole code please find error and let me know.otherwise if you change in my code i am happy if it work.
  i read lots of article but can't work so please see what happen.</p>