Destructure property whose name is a reserverd keyword

Question

While using material ui, I realized they have a prop called in in the transitions components, but when trying to destruct the props, I can't because in is a reserved key word.

const MyFade = ({ children, in, ...otherProps }) => { // this gives me an error 
  return (
    <div {...otherProps}>
      <Fade in={in}>{children}</Fade>
    </div>
  );
};

How can I do this? I need to destruct in and have otherProps to spread in the div.

Answer 1

Just assign a new, not reserved name inside destructuring.

const o = {
   in: 'foo',
   out: 'boo',
};

const { in: inProp } = o;
      // ^^^^ assign new name

console.log(inProp);