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

user_3711421 0
Viewed 11042

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.

jsx reactjs components
2 Answers

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"

user_56384180
Related