Making Cards in React Native

Iterating over data to create identical elements with different data is paramount to software development. Luckily it’s not too hard to do! Let’s take a look into the structure and method to take a set of data and iterate through it to make cards with React Native.

First, we will start with a pretty basic app and give it a data set. It should look something like this:

Next we will create a new component that will house the individual cards. We are going to iterate through the data set and send the card component just one object to work with at a time. Here’s what our Card component is going to look like:

As you can see, the data will be passed as a prop to the Card component. I destructed it to clean it up!

Finally we just need to iterate through the data set with a .map and send each element in the array to the Card component to be rendered. For this we will write a function and then invoke it inside what is going to be rendered. Here it is!

And there you have it. You can add any sort of data, functions, and styling to cards. The world is truly your oyster.