title: React js add event listener for each "children"
body: <p><strong>Hi everyone.</strong></p>
  
  <p>I have:</p>
  
  <pre><code>import React,{useState, useEffect} from 'react'
  
  /* Styles */
  import css from './MyComponent.module.sass'
  
  const MyComponent= ({children, className, ...props}) =&gt; {
      const onOver = (e) =&gt; {
          console.log(e.target.offsetLeft);
      }
  
      //And here i need to add onOver function to each "children" element as onMouseOver event
  
      return(
          &lt;ul className={`${css.MyComponentWrap} ${className}`}&gt;
              &lt;div className={css.MyComponent}&gt;&lt;/div&gt;
              {children}
          &lt;/ul&gt;
      );
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>How can I do it?</p>
  
  <p>I searched the Internet for an answer, but did not find anything suitable.
  Is it possible to make all the code in this component so that nothing needs to be added to the component in which it will be used?</p>
  
  <p><em>P.S. sorry for my bad english))</em></p>
  
  <p>upd.</p>
  
  <pre><code>const AnotherComponent = () =&gt;{
  
      //here is a huge map function
  
      let mapResult;
      return (
          &lt;MyComponent&gt;
              {mapResult}
          &lt;/MyComponent&gt;
      );
  }
  </code></pre>
  
  <p>I have a huge and hard maping thats why I cannot use @Kox `s answer.</p>
  
  <p>and i need some thing like loop in "MyComponent" and add event or pass it as props.</p>
  
  <p>Actually I can but i thing it not a best solution</p>