How to destruct `data-*` (hyphen cased) attributes from props?

Question

Im trying to convert one of my components to a functional stateless component (FSC).

But FSC will not be optimized if using ...rest, therefore i need to destruct the components props.

I call Link as

<Link to={link} data-navbar-click="close-menu">{name}</Link>

then in Link i want to destruct the hyphen cased> data-navbar-click prop:

function Link({ to, className, onClick, target, rel, key, data-navbar-click}) {

However that doesnt compile. So i tried:

function Link({ to, className, onClick, target, rel, key, ['data-navbar-click']}) {

But that doesnt work as well.

Answer 1

Simplest solution: use alias.

const Link = ({
  to,
  className,
  onClick,
  target,
  rel,
  key,
  'data-navbar-click': dataNavbarClick,
}) => {
  const test = dataNavbarClick;
};

dataNavbarClick should have the value "close-menu"

Answer 2

You can write a utility function that transforms camelCase key names to kebab/hyphen-case properties, picked them out out of the props object and, by using JSX spread, render them in the component.

Example below:

import kebabCase from 'lodash/kebabCase';

const props = {
  dataNavAttr: 'close-menu',
  itemCount: 100
}

const pickAndTransformDataProps = (props, findByKey) => {
  const pickedProps = {};
  Object.keys(props).map(key => {
    if (key.includes(findByKey)){
      pickedProps[kebabCase(key)] = props[key];
    }
  });
  return pickedProps;
}

const pickedDataProps = pickAndTransformDataProps(props, 'data');
console.log({ pickedDataProps }); 
// Using JSX spread: <Component onClick={props.onClick} { ...pickedDataProps } />