CODEWITHSUNDEEP
javascripthtmlcssreactjs
Dreams
Dreams

Reputation: 8506

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

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?

Upvotes: 1

Views: 4136

Answers (2)

1ven
1ven

Reputation: 7026

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.

Upvotes: 0

The Reason
The Reason

Reputation: 7973

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

Upvotes: 2

Related Questions