Strugglering understand some code React-Transition-Group + Styled-Components

JavaScript
1

so for the past few days ive been trying to make animation changes in react with variables inside the css without much luck. the tutoiral im following is this:

https://dev.to/terrierscript/styled-component--react-transition-group--very-simple-transition-jja

however when i get to this line of code im not quite following

Transition in={animate} timeout={500}>
        {(state) => (
          // state change: exited -> entering -> entered -> exiting -> exited
          <Animation state={state}>Hello</Animation>

i see that a function is called with state as a parmeter which then passes it to the animation component as props however im not following what state actually is in the call? any help would be very much appeachated been trying to relicate the results of the tutoiral but getting no where.

2

The tutorial you’ve linked is hardly worthy of the term, imo. He provides an arbitrary example with little to no explanation. When you encounter something like this, your time is much better spent reading the actual docs. In this case - and most cases for packages you’d actually want to use - they have more examples and actual explanation of what/why/how.

When in doubt, go to the source (literally the source code if you have to!)