Get value inside unordered list using React UseRef

Question

Hi I have the below code, in which I am trying to get the value inside list using when a person clicks on the button wrapped inside that is inside list element. I tried using UseRef but it is returning all the listed items, but In my case I only want to target the value that is associated with that button. Here is my current approach.

const tabRef = useRef();

  function addButtonHandler() {
    console.log(tabRef.current.innerText);
  
  }

<ul ref={tabRef}>
    <li >
      <button onClick={addButtonHandler}></button>
      Some context here.</li>
      <li >
      <button onClick={addButtonHandler}"></button>
      More context here.</li>
      <li >
      <button onClick={addButtonHandler}></button>
      even more context here.</li>
    </ul>

Brendan Bond · Accepted Answer · 2022-09-11 19:03:59Z

1

This seems like a good candidate for event delegation. Also, you don't necessarily need a ref here just to get the value, because JavaScript event handlers provide you with the event object, which includes the target of the event! You could certainly use a ref to store it for later, but my point here is that useRef is not a necessary part of getting a value from a list in an event handler. No "Reacty" features needed at all here!

const App = () => {

  function handleClick(event) {
    event.preventDefault();
    if (event.target.tagName === 'BUTTON') {
      console.log(event.target.nextSibling);
    }
  }

  return (
  <ul onClick={handleClick}>
    <li>
      <button>Button 1</button>
      <span>Some context here.</span>
    </li>
    <li>
      <button>Button 2</button>
      <span>More context here.</span>
    </li>
    <li >
      <button>Button 3</button>
      <span>even more context here.</span>
    </li>
    </ul>)
    }
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

edited Sep 11, 2022 at 19:03

answered Sep 11, 2022 at 18:55

Brendan Bond

1,8901 gold badge11 silver badges9 bronze badges

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

2 Comments

user19958227 Over a year ago

Thanks @Brendan Bond. It is working just fine :)

Brendan Bond Over a year ago

@user19958227 glad to hear it. To add a little bit of clarity to my answer - when I say that event handlers provide you with the event object, this is not a feature unique to React! All we've done here is use regular old JavaScript APIs to get the value from within a list, we've used zero "special" React features.

wctiger · Accepted Answer · 2022-09-11 18:57:17Z

0

You may get DOM nodes of those <li>s by looking at tabRef.current.children[n]

But not sure if ref is the right way in React to achieve what you wanted to do. How about to hold the text within an array?

const textArr = ['Some context here', 'More context here', 'even more context here'];
const addButtonHandler = (text) => { console.log(text) };
return (<ul>
  { textArr.map(text => 
    <li key={text}><button onClick={() => addButtonHandler(text)} />{text}</li>) }
  </ul>)

answered Sep 11, 2022 at 18:57

wctiger

1,0811 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Get value inside unordered list using React UseRef

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related