ReactJS – List Rendering | React Tutorial

📌 What is List Rendering?

What is List Rendering in React?

Lists are very useful when building the UI of any website. They are mainly used for displaying a collection of data like products, names, courses, etc.

In React, lists are usually rendered using the JavaScript map() method, which is the preferred way to iterate over arrays and generate JSX.

📌 Why Use Lists in React?

Lists make it easy to render multiple elements dynamically
Commonly used for displaying arrays of products, names, courses, etc.
React works efficiently with lists when they use keys for each item

⚙️ JavaScript map() Array Method

map() creates a new array by calling a function on each element
map() executes once for each element in the array
map() does not execute for empty elements
map() does not change the original array

🧮 Basic List Rendering Example

Here’s a simple example of rendering an array of students and numbers using map():

React Playground

import Student from './Student.jsx';
export default function App() {
  return (
    <>
      <Student/>
    </>
  );
}

Open Sandbox

📌 Rendering Objects in a List

You can also render an array of objects using map():

React Playground

import Student from './Student.jsx';
export default function App() {
  return (
    <>
      <Student/>
    </>
  );
}

Open Sandbox

📤 Passing Data Between Components

We can pass list data from one component to another using props:

React Playground

import Student from './Student.jsx';
export default function App() {
  return (
    <>
      <Student/>
    </>
  );
}

Open Sandbox

⚠️ List Warning: Missing Keys

If you don’t add a key prop when rendering lists, React shows a warning:

Warning: Each child in an array or iterator should have a unique “key” prop.

Keys help React identify which items have changed, added, or removed. Without keys, React re-renders entire lists instead of individual items.

✅ List with Keys

Always add a unique key when rendering lists. Keys make React rendering more efficient:

React Playground

import Student from './Student.jsx';
export default function App() {
  return (
    <>
      <Student/>
    </>
  );
}

Open Sandbox

react

Nearby lessons