Displaying a relative div on mouse hover over an HTML tag using React

Question

Displaying a relative div on mouse hover over an HTML tag using React

In the section below, you will find the code snippet...

<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>

In my scenario, I possess an object named books array and my aim is to generate a fa-flag icon for each book. My objective is to display distinct memo dialog whenever hovering over each flag icon.

While I am familiar with implementing this using jQuery, I am seeking guidance on accomplishing the same in a React-based approach without relying on jQuery.

javascript html css reactjs

Answer 1

Answer №1

Are you unsure of the goal you are trying to achieve? This example could be beneficial 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'));

Additionally, you can check out this fiddle example.

I hope this assists you. Thank you.

Answer 2

Are you unsure of the goal you are trying to achieve? This example could be beneficial 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'));

Additionally, you can check out this fiddle example.

I hope this assists you. Thank you.

Answer 3

Answer №2

My recommendation is to utilize the state variable isHovered to store the state of the hover effect.

When isHovered is true, we display a component (in this case, a dialog box), and hide it when the variable is false.

Whenever we hover over the link element, the handleEnter function is triggered to set isHovered to true.

Conversely, when the cursor moves away from the link element, the handleLeave function is called to set isHovered to false.

For 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>
    );
  }
}

For a demo, you can visit this CodePen link.

Answer 4

My recommendation is to utilize the state variable isHovered to store the state of the hover effect.

When isHovered is true, we display a component (in this case, a dialog box), and hide it when the variable is false.

Whenever we hover over the link element, the handleEnter function is triggered to set isHovered to true.

Conversely, when the cursor moves away from the link element, the handleLeave function is called to set isHovered to false.

For 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>
    );
  }
}

For a demo, you can visit this CodePen link.

Displaying a relative div on mouse hover over an HTML tag using React

Answer №1

Answer №2

Similar questions

Adjusting the size of the iframe to match the dimensions of the window

The Node Sass version 7.0.1 does not work with ^4.0.0 in React on Mac operating systems

Are there any CSS attribute configurations that I am overlooking?

Updating the parameter names in an AJAX request

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Include a search query parameter in the URL by adding "?search=" to connect with a

The popover seems to be failing to appear

The 'ReactNode' binding element is automatically assigned an 'any' type

Can you assist me with setting a value in an ASP dropdownlist?

An HTML form containing various input fields organized as a JSON string

Node.js is having trouble locating the JSON file for Ajax requests

Organize JSON data in Angular 6 from an observable based on a specific key

Gracefully Switching Between Various Functions

Access Denied: Origin Issue with OAuth2

Bizarre CSS Transitions and Scaling Quirks in Webkit

The textboxes are not displaying the floating numbers correctly

What could be causing the three.PointLightHelper to fail in my script?

Creating PDF documentation in a JavaScript architecture MVC framework, specifically utilizing Backbone.js

Using the React Hook "usePathname" inside a callback is not allowed

Can you explain the variance in these code snippets when implementing React's setState() function?