How to get text of multiple clicked elements using useRef? - reactjs

Question

I'm trying to get useRef to console.log the text of the clicked element but it just logs the last span element of "Green" every time no matter which span element I click.
Is there a way to console.log the text for the clicked element? Perhaps there's a better hook to get the result I'm looking for?
Thanks for any help.
import React, { useRef } from "react";
export default function Hello() {
const ref = useRef(null);
function checkRef() {
console.log(ref.current.innerText);
}
return (
<div className="container">
<span ref={ref} onClick={checkRef} className="selected">
Blue
</span>
<span ref={ref} onClick={checkRef} className="selected">
Red
</span>
<span ref={ref} onClick={checkRef} className="selected">
Green
</span>
</div>
);
}

Answer 1

If you need a ref, put the <span>s into a separate component:
const Button = ({ text }) => {
const ref = useRef(null);
function checkRef() {
console.log(ref.current.innerText);
}
return (
<span onClick={checkRef} className='selected' ref={ref}>
{text}
</span>
);
};
export default function Hello() {
return (
<Button text='Blue' />
<Button text='Red' />
<Button text='Green' />
);
}
Though, at this point, you could also remove the ref completely and just log the text prop. This would be much more elegant if it's possible with your real code:
function checkRef() {
console.log(text);
}