How were these states created without being staggered?

This is the horoscope example on the React website. It has no tutorial. It has an unusual setup in the states where they are all in rows. If I tried to make something like this it would be staggered.


Horoscope demo is quite simple. It has buttons which simply change the state in one component. This does not work well when using dynamic content but can work i this kind of small projects.

Component states are in “same row” simply because there are just three elements which are sliced with Slice tool and then used as “unique elements” in separate states.

That technique just helped me eliminate a lot of component screens. Thanks.

The slicing technique has helped me cut my component size down by half.