List Rendering And List With Keys 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

• WARNING:
  • 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 = students.map((std, index) => <li key={index}>{ std }</li>);
  // const numbers = [2,4,6,8];
  // const result = numbers.map(num => <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 (
    <div>
    { students.map(std => <Student key={std.id} std={std}/> ) }
      {/* { <ul>{ studentNames }</ul> } */}

      {/* { students.map(std => <Student std={std}/> ) } */}
      {/* {result} */}
      {/* { students.map(std => <h1>{ std }</h1>) } */}
      {/* { numbers.map(num => <h1>{num = num * 2}</h1>) } */}
    </div>
  )
}

export default Students

Student.js File Code

import React from 'react'

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

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'));
root.render(
    <div className='App'>
    <Students/>
    </div>
);

// 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: https://bit.ly/CRA-vitals
reportWebVitals();

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

https://www.mediafire.com/file/oxl48u3x2lzg5hx/LIST+RENDERING+React+JS.rar/file