CODEWITHSUNDEEP
javascriptreactjsevents
Slim
Slim

Reputation: 683

ReactJS: Issue with accessing event.target children

I have within my React App a component containing an element with an onMouseEnter/Leave handler 

<CollapseElement>
  <li onMouseEnter={e => handleEnter(e)}>
   {props.children}
  </li>
</CollapseElement>

The li is passed children through props, amongst which an element with a className of "targetelement" that I would like to access within the handleEnter of CollpaseElement component and pass it to a function

const handleEnter = (e) => {
        e.preventDefault();
        console.log(e.currentTarget.innerHTML)
        function(...)
    }

While the console.log does show me the innerHTML amongst which the target, I cannot figure a way of selecting it. I have tried querySelector('.targetelement'), closest or querySelectorAll to no success: either a null error or, for example if the function is trying to get the coordinates of the target element, I end up with all values at 0

Thank you for your input

Upvotes: 0

Views: 642

Answers (1)

Slim
Slim

Reputation: 683

Solved. The issue was in understanding the sync and rendering of React/DOM elements. By using useEffect in the parent element with the correct event sent via the context, I am able to target the child with the class I needed

Upvotes: 1

Related Questions