Multiple elements with the same ref, React

Question

I have a problem. It is:

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={this.handleMouseEnter}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.title = node}>Text</p>
      </div>
    </li>
      );
}); 
handleMouseEnter() {
    this.title.style.opacity = "1";
}

So, when mouse enters .title-wrapper I want to set opacity to 1 on .title-full. But no matter on which .title-wrapper mouse enters, always opacity will be set to the last .title-full. The problem is easy to solve with querySelector but I read that using it is bad thing in React, isn't it?

tech4him · Accepted Answer · 2017-12-14 00:27:23Z

3

The reason this.title is always set to the last element is because you are setting each element in the loop to this.title, so the last one overwrites the one before it, and so on.

What about just using CSS directly, instead of handling it in React at all? Example:

.title-wrapper:hover .title-full {
  opacity: 1;
}

answered Dec 14, 2017 at 0:27

tech4him

9805 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomasz Superson Over a year ago

thanks, I assumed incorrectly that when .title-full gets opacity 1 then hover stops working on .title-wrapper

Alex Mcp · Accepted Answer · 2017-12-14 00:24:39Z

1

Just a general comment that refs aren't usually preferred in React (maybe for forms or modals sometimes). What you're emulating is a jQuery-like DOM manipulation approach, which can certainly work but is sidestepping the power of React being state-based, obvious, and easy to follow.

I would typically

this.setState({
   hovered: true
})

in your handleMouseEnter method (and unset it in your mouseOut). Then choose your className based on this.state.hovered

answered Dec 14, 2017 at 0:24

Alex Mcp

19.4k12 gold badges62 silver badges94 bronze badges

1 Comment

Tomasz Superson Over a year ago

But what if I have lots of .title-full elements? How how can I get to know on which concrete element should I set that state.

GermanWebDev · Accepted Answer · 2017-12-14 03:01:31Z

I think going with CSS is definitely the best approach.

Just for anyone running into this issue of multiple refs in another context, you could solve the issue by storing the refs in an array

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={() => this.handleMouseEnter(index)}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.titles[index] = node}>Text</p>
      </div>
    </li>
  );
}); 

handleMouseEnter(index) {
  this.titles[index].style.opacity = "1";
}

Again, you don't need to do this for your use case, just thought it might be helpful for others :D

Collectives™ on Stack Overflow

Multiple elements with the same ref, React

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related