List Rendering In React JS

React List Rendering

  • In React JS, Lists are very useful when it comes to developing the UI of any website.
  • In React JS, Lists are mainly used for displaying list of things in a website. E-g: list of products, list of names, list of courses etc.
  • In React JS, you will render lists with some type of loop.
  • The JavaScript map() array method is generally the preferred method.

JavaScript map() array method

  • In JavaScript, map() creates a new array from calling a function for every array element.
  • In JavaScript, map() calls a function once for each element in an array.
  • In JavaScript, map() does not execute the function for empty elements.
  • In JavaScript, map() does not change the original array.

List And Keys In React JS

List Without Keys In React

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

List And Keys In React JS

  • In React JS, Keys allow React to keep track of elements.
  • This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list.
  • In React JS, Keys need to be unique to each sibling.
  • In React JS, Generally, the key should be a unique ID assigned to each item. As a last resort, you can use the array index as a key
  • In React JS, A “key” is a special string attribute you need to include when creating lists of elements in React.
  • In React JS, Keys are used to React to identify which items in the list are changed, updated, or deleted.
  • In other words, we can say that keys are used to give an identity to the elements in the lists.
  • Keys help React identify which items have changed, added or removed.
  • Help in efficient update of the user interface.

Source Code Of List Rendering And List With Keys

Students.js File Code

import React from 'react'
import Student from './Student'

function Students() {
  // const students = ["Adil","Kumar","Prem","Zain"];
  // let studentNames =, index) => <li key={index}>{ std }</li>);
  // const numbers = [2,4,6,8];
  // const result = => <h1>{num = num * 2}</h1>);
  const students = [
      id: 1,
      name: "Ali",
      age: 23
      id: 2,
      name: "Kumar",
      age: 25
      id: 3,
      name: "Prem",
      age: 27

  return (
    { => <Student key={} std={std}/> ) }
      {/* { <ul>{ studentNames }</ul> } */}

      {/* { => <Student std={std}/> ) } */}
      {/* {result} */}
      {/* { => <h1>{ std }</h1>) } */}
      {/* { => <h1>{num = num * 2}</h1>) } */}

export default Students

Student.js File Code

import React from 'react'

function Student({std}) {
  return (
      <h1>I am {} and I am {std.age} years old.</h1>

export default Student

Index.js File Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
    <div className='App'>

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

Click Below Link to Download Notes & Source Code Of This Blog

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *