From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Lists in React

Lists in React

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Lists in React

“

Hello and welcome to lesson number 7. In this lesson, we will discuss about rendering lists, keys and React's reconciliation algorithm. Usually in the web development, we have to render lists which are client's data which we have to show on the screen. This data is usually in the form of arrays of objects. In react, we can loop through arrays and show it to the screen. For each array item, we will be returning a jsx element. An example would be to render on the screen a unordered list using a ul element and we can have multiple li elements inside it. That's an example of how we are going to do something like this in reacts world. We have an items array which is array of string elements. In the return function, we can have a ul JSX element. Inside it, we have curly brackets for using javascript. We can then use the array's map function to list all the items in the array. Consider that we have just one li element and using the map function, all the items are going to render inside it…

Contents