From the course: React Practice for Beginners: Build and Modify Basic Components

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Using map to render arrays of data

Using map to render arrays of data

- [Speaker] Let's see how we can use map to render a array of data. We often need to show lists of data like products, users, or messages on UI. These lists are not hard-coded into JSX or at least they shouldn't be. Instead, we usually store the data in an array and use the method map to generate JSX for each item. Imagine if we hard-coded it, we would have to change the code when the data was changing, and that's not very feasible for dynamic data. Working with map keeps the code flexible, and if the data changes, React automatically renders the updated list. Let's see an example where we map over a list of movies and display each one in the list item. As you can see, I'm not using state here for simplicity, so I have a constant movies, which is holding three movies currently. Great movies, if you were to ask me and then I'm displaying them on line 14 to 17. What is going on there? Well, the Movies Array holds the data and map that I'm using on line 14 is looping over the array…

Contents