DEV Community

Embedding Data Into React/JSX Elements

Adam Nathaniel Davis on March 22, 2023

What I'm about to show you is really pretty basic. So Code Gurus out there can feel free to breeze on by this article. But I've rarely seen this ...

Read full post

Mike Ritchie • Mar 22 '23

This approach can be improved by using data attributes in the target element handled by the click event. For example

const handleClick = (event) => {
  const paintIndex = event.target.dataset.paintindex;
  // do something with the value
}
<td data-paintindex={paintIndex} onClick={handleClick}>{paintIndex}</td>

Data attributes can be applied to any element and are guaranteed never to interfere with native functionality provided by native attributes. Note that child tags on the element will mean that you may have to traverse up the parent tree back to the intended target before you can access the attributes. But it’s nice because you can have as many attributes as you need without trying to figure out what native attribute to use.

Great article!

Adam Nathaniel Davis • Mar 22 '23

Great point! And yeah, I should've touched on data attributes as well. Thank you!

JoelBonetR 🥇 • Mar 23 '23

Just did a quick cross-read (bookmarked for later fully-comprehensive reading) and I'm wondering if Styled-Components wouldn't apply better to this use-case (so you just pass the color as prop and you don't need to generate all classNames beforehand/through a process) 😁

Adam Nathaniel Davis • Mar 23 '23

That's basically what I covered under the "Wrapper Components" section.

JoelBonetR 🥇 • Mar 23 '23

Amazing!
See, that's why I need to read it calmly afterwards 😂😂 cross-reading is never enough 😅

Adam Nathaniel Davis • Mar 23 '23

LOL. To be fair, I didn't specifically put it in the context of styled components. But it's basically the same concept.

JoelBonetR 🥇 • Mar 23 '23

haha yes, I've seen it briefly 😁 ty!

shynimol 400 • Mar 25 '23

Adam Nathaniel Davis • Mar 25 '23

There's a whole section on "Wrapper Components"...

krlz • Mar 22 '23

Wow, this article is awesome! The way you explain the technique for extracting bits of data from JSX elements is on point. I'm pumped to see more content like this from you in the future! Keep up the great work!

Adam Nathaniel Davis • Mar 22 '23

Thank you!

Molly Stewart-Gallus • Mar 26 '23 • Edited

You could also use data as well as data attributes. I mostly use data attributes for CSS.

For this specific case it's also possible to use useMemo.

const TableCells = ({cells}) => useMemo(() => cells.map(cell => {
      const paintIndex = colors.findIndex(color => color.name === cell.name);
      return {
        paintIndex,
        onClick(e) {
          return handleCellClick(paintIndex);
      };
}), [cells])
.map(({ paintIndex, onClick }) =>
<td onClick={onClick)>
  {paintIndex}
</td>
);
~~~

Some comments have been hidden by the post's author - find out more