React - How to show relative div when mouse hover on a html tag?

Question

Below is my code...

<ul className="no-style board__list">
   {Object.keys(today.books).map(function(id) {
       var refBook = today.books[id][0];                                            
          return (
            <li key={refBook._id} className="board__list-item">
                <div className="container flexrow">
                      <div className="flexrow__fit-2">{refBook.book_no}</div>
                      <div className="flexrow__org">
                         <span className="board__icon-wrap">
                           {refBook.memo
                               ? (<i className="fa fa-flag" style={{color:"#F9AB9F"}}></i>)
                               : null
                           }
                        </span>
                           {refBooking.memo
                               ? (<div  className="memo_dialog">{refBook.memo}</div>)
                               : null
                           }
                     </div>
                </div>
           </li>
        );
    })}
</ul>

I have a object books array and I create a fa-flag icon for each book. What I want is to show different memo dialog when mouse hover on each flag icon.

I know how to do it with query but how can I do this in react way not using jquery?

Answer 1

I'm not sure what are you trying to achieve but this example might be useful for you

class Book extends React.Component {
  constructor(props){
    super(props);
    this.handleOver = this.handleOver.bind(this);
  }
  handleOver(name){
    this.props.over(this.props.name)
  }
  render(){
    return <div onMouseOver={this.handleOver}>{this.props.name}</div>
  }
}

class BookList extends React.Component {
  constructor(props){
    super(props);
    this.mouseOver = this.mouseOver.bind(this);
    this.state = {
        books: ['hello', 'amazing', 'world'],
      memo: ''
    }
  }
  mouseOver(name){
    this.setState({memo: name})
  }
  render(){
    const bookList = this.state.books.map((book, index)=>{
        return <Book key={index} name={book} over={this.mouseOver}/>
    });
    return <div>
        {bookList}
      <hr/>
      <div>{this.state.memo}</div>
    </div>
  }
}

React.render(<BookList />, document.getElementById('container'));

Also fiddle example.

I hope it will help you. Thanks

Answer 2

I suggest you to use isHovered state variable, to store hover state.

We are displaying some component(in your case it would be dialog box), if isHovered is true and hide it when this variable is false .

When we will hover on link element, we will trigger handleEnter function to set isHovered variable to true .

Similarly, when we are moving cursor out of link element, we are triggering handleLeave function to set isHovered variable to false .

Example:

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isHovered: false,
    };
  }

  handleEnter() {
    this.setState({
      isHovered: true 
    });
  }

  handleLeave() {
    this.setState({
      isHovered: false 
    });
  }

  render() {
    return (
      <div>
        <a
          onMouseEnter={this.handleEnter.bind(this)}
          onMouseLeave={this.handleLeave.bind(this)}
        >Link</a>
        {this.state.isHovered ? (
          <div className="box">A component</div>
        ) : (
          <div />
        )}
      </div>
    );
  }
}

Also, you can see demo at CodePen.