How to render lists | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In this React JS tutorial, the instructor guides beginners on rendering lists using React components. They cover creating lists with arrays, using loops like 'for of' and 'forEach', and emphasize the preference for 'map' due to its ability to return a new array. The importance of unique 'key' props for list items is discussed, with recommendations for using unique identifiers or indexes when necessary. The instructor also demonstrates rendering a list of components, managing keys, and accessing keys within components. Finally, a task is set to practice adding and removing list items in a table format, encouraging hands-on learning.

Takeaways

• 😀 This video is part of a React JS tutorial series aimed at beginners.
• 📚 The focus of the video is on rendering lists in React.
• 🔧 The presenter demonstrates creating an unordered list using a numbers array.
• 🔄 Different JavaScript loops are mentioned, but the map function is preferred in React for rendering lists.
• 🛠 The map function is favored because it returns a new array, unlike forEach which does not return anything.
• ⚠️ React warns about the importance of using unique 'key' props for list items to help identify changes in the list.
• 🔑 It's recommended to use a unique identifier from the data as a key, rather than the index, unless no other unique identifier is available.
• 🚫 React does not pass the 'key' prop into the components; it's only used internally by React.
• 💻 The video includes a practical example of rendering a list of 'Student' components with unique keys.
• 📝 The presenter assigns a task to the viewers to practice rendering lists in a table format, adding, and removing items.

Q & A

What is the main topic of the video?

The main topic of the video is how to render lists in React JS, specifically for beginners learning React from scratch.

Why does the instructor prefer using the 'map' function over other loops in React?

The instructor prefers using the 'map' function because it returns a new array by applying the callback function on each element of an array, which is more efficient and concise compared to other loops like 'for of' or 'forEach' that do not return a new array.

What is the significance of using a unique 'key' prop in a list of elements in React?

Using a unique 'key' prop in a list of elements in React helps React to identify which items have changed, added, or removed, thus improving performance and providing hints for efficient updates to the DOM.

What should be the best practice for choosing a key in a list?

The best practice for choosing a key is to use a unique identifier from the data, such as an ID from a database, as it helps maintain the identity of elements even when the order changes.

Why does React warn against using indexes as keys if the order of items may change?

React warns against using indexes as keys if the order of items may change because it can negatively impact performance and cause issues with component state, as indexes do not provide a stable identity for elements.

How can you add a 'key' to an element in a list in React?

You can add a 'key' to an element in a list by using the 'key' property on the element, such as `<li key={item.id}>`, where 'item.id' is a unique identifier for each list item.

What is the task given at the end of the video?

The task is to create a table using the provided data, with text boxes for inputting a student's name, age, and country, and buttons to add and delete data from the table.

Why is it important to keep the students array in a state for the given task?

It is important to keep the students array in a state for the task because it allows the UI to update dynamically when a student is added or removed, reflecting the changes in the list.

What is the purpose of the 'key' prop in React components?

The 'key' prop in React components serves as a hint to React for identifying which items have changed, added, or removed, but it is not passed into the components as a prop. It is used internally by React for performance optimization.

How can you access the 'key' in a component if needed?

If you need to access the 'key' inside a component, you should pass it as a different prop, as the 'key' prop itself is not passed to the component.

Outlines

00:00

📚 Introduction to Rendering Lists in React

This paragraph introduces viewers to the process of rendering lists in React, as part of a React JS tutorial series for beginners. The instructor demonstrates how to create an unordered list using a numbers array and explains the preference for using the 'map' function over other JavaScript loops like 'for of' and 'forEach'. The 'map' function is favored because it returns a new array, which can be used directly to render the list. The paragraph also addresses the importance of using unique 'key' props for list items to help React efficiently update the DOM. The instructor shows how to use both unique identifiers from data and indexes as keys, with a caution against using indexes when the list order may change due to potential performance impacts.

05:08

🔑 Keys in Lists and Rendering Components

The second paragraph delves into the practical application of rendering lists with unique keys and rendering components dynamically. The instructor shows how to use the 'map' function to render a list of 'Student' components, each receiving its own props. The importance of not using 'key' as a prop within components is highlighted, as keys are for React's internal use and are not passed to child components. The instructor also provides a task for viewers to practice rendering lists in a table format, adding, and removing items, emphasizing the need to keep the array in a state for such dynamic UI updates. Finally, the instructor invites viewers to like, subscribe, and support the channel, and provides a link to a Git repository for solution code.

Keywords

💡React JS

React JS is a popular JavaScript library used for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components, making it easier to manage complex interfaces. In the video, React is used as the framework to demonstrate rendering lists, applying styles, and managing keys in components.

💡Rendering Lists

Rendering lists refers to the process of displaying data in a list format using React components. This concept is essential when working with arrays of data, such as creating an unordered list of items. In the video, the speaker explains how to render lists in React by using loops like 'for of', 'forEach', and 'map' to dynamically generate JSX elements.

💡Map Method

The map method is a JavaScript function used to iterate over arrays and create a new array by applying a function to each element. In React, the map method is preferred for rendering lists because it directly returns a new array of elements that can be rendered. The video emphasizes using the map method over 'forEach' because it allows concise rendering of lists without needing to manually manage JSX variables.

💡Keys

Keys in React are special attributes that help identify which items in a list have changed, been added, or been removed. They are crucial for maintaining the performance and stability of dynamic lists by helping React manage component updates efficiently. The video explains that keys should be unique among siblings and discusses the implications of using non-unique values, such as indexes, when unique identifiers are not available.

💡JSX

JSX stands for JavaScript XML and is a syntax extension for JavaScript used in React to describe UI elements. It allows developers to write HTML-like code within JavaScript, making it easier to visualize the component structure. The video demonstrates using JSX to create list elements and to define the structure of components that render lists in the React application.

💡Component

In React, a component is a reusable piece of UI that can be composed to build complex interfaces. Components can manage their own state and props, and they render JSX elements. The video discusses how to create components, such as a Student component, and how to use them within the App component to render dynamic lists of data.

💡State

State in React refers to an object that holds dynamic data for a component, allowing it to reactively update the UI when the data changes. The video explains the importance of using state to manage the array of students, especially when adding or removing items from the list, as it ensures the UI reflects the current data accurately.

💡Props

Props, short for properties, are used in React to pass data from parent components to child components. They allow components to be dynamic and reusable by providing different data inputs. In the video, props are used to pass data such as names, ages, and countries to the Student component, enabling it to render the appropriate content.

💡Unique Identifiers

Unique identifiers are values that distinguish items from each other, such as IDs. In React, unique identifiers are often used as keys in lists to help React differentiate between items. The video discusses the importance of using unique identifiers as keys to avoid errors and improve the rendering performance of lists.

💡Looping Methods

Looping methods in JavaScript, such as 'for of', 'forEach', and 'map', are used to iterate over arrays. These methods allow developers to perform actions on each element, like rendering JSX elements in React. The video compares these methods, highlighting the advantages of using 'map' in React due to its ability to directly return arrays of JSX elements for rendering.

Highlights

Introduction to rendering lists in React JS for beginners.

Explanation of how to create an unordered list using a numbers array.

Preference for using the 'map' function over other loops in React for rendering lists.

Demonstration of using a 'for of' loop to render JSX elements.

Using 'forEach' loop to push JSX elements into a variable for rendering.

Directly creating a list on the fly using 'map'.

Importance of using unique 'key' props for list items in React.

Using a unique identifier or index as a key for list items.

Warning about using the same key for different children and its implications.

Explanation of why React does not recommend using indexes as keys if the order of items may change.

Transforming an array into a list of Student components.

Passing props to the Student component and rendering it.

Solving the unique key error by passing an 'id' as a key.

Understanding that keys are not passed as props into components.

Task assignment to display data in a table format with add and delete functionalities.

Emphasis on keeping the students array in a state for UI changes.

Invitation to like, subscribe, and support the channel.

Transcripts

Hi Friends

Welcome back to React JS - Zero to Hero series.

This series is for beginners who wants to learn React JS from Scratch.

In the last video I have explained about how we can render images in react and how we can

apply styles to react components.

In this video, I am going to explain how we can render lists in react.

Let's start.

I have created a new react application in which I have created this component and I

am using that in the App component.

And so, we can see this.

Ok.

Let me create a numbers array, which is having some numbers.

I wanted to create an unordered list using this array.

For that I can make use of any loops in javascript.

We have different kind of loops available in javascript to loop through an array.

For example, we have for of loop, we have for each loop, we have map, and many more.

In react we mostly prefer to use map.

I will explain the reason for that shortly.

Now, let me show you how we can use for of loop first.

First let's create a variable to hold our JSX elements.

Then, we can use a for of loop like this, and push our JSX element to that variable.

And finally here, we can render that variable.

And so, we can see this list is getting rendered.

Similarly, we know using for each we can loop through an array.

So, we can use a for each to push our JSX element into this variable and we can render

that.

This will also work.

Similar to for each, we can use map to loop through an array.

But, the main difference between map and forEach is that the map method returns a new array

by applying the callback function on each element of an array, while the forEach method

doesn't return anything.

And so, here we can simply assign this to this variable and render that.

I told we mostly prefer to use map, the reason is, instead of creating a separate variable

and pushing each element inside this variable and render that, we can directly use map to

create our list on the fly.

Like this.

And so map is preferred over other loops in javacript.

Ok, we have created our list and we can see it is working as expected.

But if I inspect, we can see there is a warning.

Each child in a list should have a unique "key" prop.

This is because, keys help React to identify which items have changed, added or removed.

The best way to pick a key is to use a string that uniquely identifies a list item among

its siblings.

Mostly when we get data from a database, an unique id will be there and so we can make

use of that.

Even here, we can see all the numbers are unique.

And so we can use this item as unique key.

To add a key, we need to use the key property.

Let me add a key to this li element.

Now, if I refresh we can see the error is gone.

Ok, now assume that our numbers are not unique now.

In this case, we get a different warning, Encountered two children with the same key.

So, in this situation there is no point in using the same number as key.

Here, we can go for Index.

Like this.

Index is always going to be unique.

So you may ask, why can't we use index always, why do we need to look for an unique identifier

from data.

The reason is React does not recommend using indexes for keys if the order of items may

change.

This can negatively impact performance and may cause issues with component state.

So, we have to use indexes as keys only if we don't have any other unique ids to use

as keys.

And in normal HTML, when we use id, that id should be unique throughout the entire DOM.

But here in react, keys used within arrays should be unique only among their siblings.

That means, if we copy this and paste again, this will work.

Ok.

Let me copy the component we have used in the previous application and let me configure

that in the app component.

And so, we can see this.

Here, as of now we are repeating this Student component.

Assume we are getting this data from database

and we are going to transform this array to create a list of Student components.

So, let me comment this and let me use map.

And so here, for each student, I can render the Student component.

To this student component, I can pass the respective props.

Like this.

And so, we can see our component is working.

This time, we are not repeating the code.

But, if I inspect, We can see the unique key error.

We can solve that by passing a key.

Here we can use the id as key.

So the error is gone.

Ok, one more thing I want to show here.

Here we can see, we are passing all these to the student component.

And in student component, we are getting all these.

Let me try to get the key.

And let me print both the key and firstName.

Now, we can see a warning, Student: 'key' is not a prop and the key is coming as undefined.

That is because, keys serve as a hint to React but they don't get passed into the components.

In case, we need this key to be accessed inside our component, we need to pass it as a different

prop.

Now, we can access this id.

Hope you understood on how to render a list and how to use a key.

Ok, let me give you a task.

You can use the same data, but this time show it in a table like this.

You can use few text boxes to get the name, age and country of a student.

And a button to add the data.

Once the add button is clicked, that data should be added to the table and for each

row, there should be a button to delete that data.

You don't want to focus on validations now.

That we are going to see as part of form handling.

For this task, you just want to focus on how to add into the list and how to remove from

a list.

And one thing to note here is, while I was explaining about list, I didn't keep the array

in a state, because I don't have a need to keep it in a state.

But for this task, as you want to change the UI when a student is added or removed, you

need to keep the students array in a state.

Try this.

If you need the solution code, you can take it from this Git repo.

The link is available in the description.

That's all for today.

Please like this video.

Subscribe my channel and support me.

Thank you.

Bye.