score:41

Accepted answer

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"

score: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 } />

Related Query

More Query from same tag