We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.
CAUTION: I recently ran into a massive ui problem when I used the index argument of the map function as the key to a mapped react component.
The state was a list of objects.
The container component sorted the list of objects in the state and mapped it to an smaller ui components.
It worked completely as expected until I added a new item to the state and sorted / mapped it again.
At that point react got confused about which properties belonged to which mapped component, and it had me questioning everything I knew about react.
Once I switched to using a uuid as a key for the mapped component, everything started working well again.