How to render lists | Mastering React: An In-Depth Zero to Hero Video Series
Summary
TLDRIn 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
📚 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.
🔑 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.
Mindmap
Keywords
💡React JS
💡Rendering Lists
💡Map Method
💡Keys
💡JSX
💡Component
💡State
💡Props
💡Unique Identifiers
💡Looping Methods
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.
関連動画をさらに表示
How to render LISTS in React 📃
What is indexing of list? | Avoid using index as keys
React Keys and Lists - Complete Tutorial!
Conditional Rendering | Mastering React: An In-Depth Zero to Hero Video Series
Communication between components | Mastering React: An In-Depth Zero to Hero Video Series
useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)