What would be the best way to access a nested div text value: It needs to be clickable on the parent div.
<div className='Outer'>
<div className='Inner'>
<p className='value'>Text Value</p>
</div>
</div>
I want to access the text of value = 'Text Value';
I have thought of passing the event into the function something like:
const handleProps = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
console.log(e.currentTarget)
}
But this gives a list of DOM nodes and I'm not sure if thats the best way in React?
I have thought of Refs but from what I can see that is more for inputs etc, unless I have misunderstood.
import {useRef} from React;
...
const pValue = useRef("");
...
<p ref={pValue} className='value'>Text Value</p>
...
// when can take value: innerHtml, textContent or innerText
console.log(pValue.current);//element
console.log(pValue.current.textContent);