Props and how to use them

So, what exactly are props? Up to now, we've only used normal tags to identify our components such as TransactionCardHeader. However, as we saw earlier when we presented different components, these ones could also have props that are used to pass down information from the bigger component (parent) to a smaller component (children).

Let's go into TransactionCardList and look at our code. As far as we can see, there's a lot of code repeating itself in terms of components being used. So, we can see this pattern emerging from inside our main <View /> tag:

Figure 3.8 – TransactionCardList component ready to be divided into smaller components

The pattern is pretty easy to see—we have four identically written pieces of code but with different information written inside of it. We basically have four instances of View components with two Text components inside of them. Seeing how this repeats, we can...