title: Arrow function in render Vs. attribute to carry data
body: <p>Developing in REACT, I've faced multiple times the needing of passing an item into a function, for example doing so:</p>
  
  <pre><code>// Inside a Hook component
  return (
    ...
    {nodes.map(n =&gt; &lt;Node data={node} onClick={(e) =&gt; handleNodeClick(e, node)} /&gt;)}
  );
  </code></pre>
  
  <p>Basically, I have a variable <code>nodes</code>, which could come from <code>props</code>, <code>useMemo</code>, ... anything. Then, I create a <code>&lt;Node&gt;</code> component for each node.<br>
  Finally, as you can see, <code>&lt;Node&gt;</code> component has a <code>onClick</code> props, which trigger a function. In THAT function I need the node, with all its data (imagine a node of a tree, with an uniqueID, icon, ...).</p>
  
  <p>So, writing as in the example, I achieve what I need, BUT! I have an arrow function in the return statement, and I've also read that it's NOT good to have an arrow function in the <code>render()</code> method.. And I guess the same is for the <code>return</code> statement inside an Hook component.</p>
  
  <p>Thus, to overcome the use of arrow function, several times I've used attribute to avoid that. Basically, something like this:</p>
  
  <pre><code>// Inside a Hook component
  const handleNodeClick = (e) =&gt; {
    if (e.target instanceof HTMLElement) {
      const nodeDOM = e.target.closest('[data-is-node]');
  
      if (nodeDOM) {
        const nodeIndex = e.target.getAttribute("data-node-index");
        const node = nodes[nodeIndex];
  
        ...
      }
    }
  }
  
  return (
    ...
    {nodes.map((n, i) =&gt; &lt;Node
      data={node}
      data-is-node={''}
      data-node-index={i}
      onClick={handleNodeClick2} /&gt;)}
  );
  </code></pre>
  
  <p>So, as you can see, eventually, in <code>handleNodeClick2</code> I do have the <code>node</code> I need. But, I wonder if all I need to do is worth it, or should I just use an arrow function.</p>
  
  <p>Hope I've explained the question good enough. Especially, I'm not even sure if the phrase <em>"no arrow function inside the <code>render()</code> method"</em> applies also for Hook component.</p>