CODEWITHSUNDEEP
reactjsreact-props
this.dev
this.dev

Reputation: 1

React destructuring: What is the meaning of this syntax?

I was looking at react-transition-group library and I came across this syntax which I've never seen before(line 1). What does it mean?

PS: I know normal destructuring of props or state; but in this case there seems to be an assignment of the prop to the 'inProp'... Thanks in advance

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

link to code: https://reactcommunity.org/react-transition-group/transition

Upvotes: 0

Views: 85

Answers (1)

Rob Brander
Rob Brander

Reputation: 3781

The prop 'in' is being renamed to 'inProp' for the context of the function. This is a feature of prop destructuring.

Upvotes: 1

Related Questions