Data collection ஒன்றிலிருந்து பல ஒத்த components-ஐ display செய்ய நீங்கள் அடிக்கடி விரும்புவீர்கள். Data array-ஐ manipulate செய்ய JavaScript array methods பயன்படுத்தலாம். இந்த page-இல், data array-ஐ filter செய்து components array-ஆக transform செய்ய React உடன் filter() மற்றும் map() பயன்படுத்துவீர்கள்.

நீங்கள் கற்றுக்கொள்ள போவது

  • JavaScript-ன் map() பயன்படுத்தி array-இலிருந்து components render செய்வது எப்படி
  • JavaScript-ன் filter() பயன்படுத்தி குறிப்பிட்ட components மட்டும் render செய்வது எப்படி
  • React keys எப்போது, ஏன் பயன்படுத்த வேண்டும்

Arrays-இலிருந்து data render செய்தல்

உங்களிடம் content list ஒன்று உள்ளது என்று வைத்துக்கொள்ளுங்கள்.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

அந்த list items-க்கு உள்ள ஒரே வித்தியாசம் அவற்றின் contents, அதாவது அவற்றின் data. Interfaces உருவாக்கும்போது, வெவ்வேறு data பயன்படுத்தி ஒரே component-ன் பல instances-ஐ அடிக்கடி காட்ட வேண்டியிருக்கும்: comments lists முதல் profile images galleries வரை. இத்தகைய சூழல்களில், அந்த data-வை JavaScript objects மற்றும் arrays-இல் store செய்து, அவற்றிலிருந்து components lists render செய்ய map() மற்றும் filter() போன்ற methods பயன்படுத்தலாம்.

Array-இலிருந்து items list generate செய்வது எப்படி என்பதற்கான சுருக்கமான example:

  1. Data-வை array-க்குள் move செய்யுங்கள்:
const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];
  1. people members-ஐ JSX nodes-ன் புதிய array ஆன listItems-க்கு map செய்யுங்கள்:
const listItems = people.map(person => <li>{person}</li>);
  1. <ul>-இல் wrap செய்யப்பட்ட listItems-ஐ உங்கள் component-இலிருந்து return செய்யுங்கள்:
return <ul>{listItems}</ul>;

இதோ result:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

மேலுள்ள sandbox console error ஒன்றை display செய்கிறது என்பதை கவனியுங்கள்:

Console
Warning: Each child in a list should have a unique “key” prop.

இந்த error-ஐ எப்படி fix செய்வது என்பதை இந்த page-இல் பின்னர் கற்பீர்கள். அதற்கு முன், உங்கள் data-க்கு சிறிது structure சேர்ப்போம்.

Items arrays-ஐ filter செய்தல்

இந்த data-வை இன்னும் structured ஆக மாற்றலாம்.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

'chemist' profession கொண்டவர்களை மட்டும் காட்ட வேண்டும் என்று வைத்துக்கொள்ளுங்கள். அந்த people மட்டும் return செய்ய JavaScript-ன் filter() method பயன்படுத்தலாம். இந்த method items array ஒன்றை எடுத்து, அவற்றை “test” ( true அல்லது false return செய்யும் function) வழியாக pass செய்து, test-ஐ pass செய்த (true return செய்த) items மட்டுமுள்ள புதிய array-ஐ return செய்கிறது.

profession 'chemist' ஆக உள்ள items மட்டும் உங்களுக்கு வேண்டும். இதற்கான “test” function (person) => person.profession === 'chemist' போல இருக்கும். அதை ஒன்றாக அமைப்பது இப்படி:

  1. people மீது filter() call செய்து person.profession === 'chemist' மூலம் filter செய்வதன் மூலம், “chemist” people மட்டும் கொண்ட புதிய array chemists-ஐ create செய்யுங்கள்:
const chemists = people.filter(person =>
  person.profession === 'chemist'
);
  1. இப்போது chemists மீது map செய்யுங்கள்:
const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       இதற்குப் புகழ்பெற்றவர்: {person.accomplishment}
     </p>
  </li>
);
  1. இறுதியாக, உங்கள் component-இலிருந்து listItems-ஐ return செய்யுங்கள்:
return <ul>{listItems}</ul>;
import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const chemists = people.filter(person =>
    person.profession === 'chemist'
  );
  const listItems = chemists.map(person =>
    <li>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        இதற்குப் புகழ்பெற்றவர்: {person.accomplishment}
      </p>
    </li>
  );
  return <ul>{listItems}</ul>;
}

Pitfall

Arrow functions =>-க்கு உடனே பின்வரும் expression-ஐ implicit ஆக return செய்யும்; எனவே return statement தேவையில்லை:

const listItems = chemists.map(person =>
  <li>...</li> // மறைமுக return!
);

ஆனால், உங்கள் =>-க்கு பின் { curly brace வந்தால் return-ஐ explicit ஆக எழுத வேண்டும்!

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

=> { கொண்ட arrow functions-க்கு “block body” உள்ளது என்று கூறப்படுகிறது. அவை single line-ஐ விட அதிக code எழுத அனுமதிக்கும்; ஆனால் return statement-ஐ நீங்கள் தானாகவே எழுத வேண்டும். அதை மறந்தால், எதுவும் return ஆகாது!

key மூலம் list items-ஐ order-இல் வைத்தல்

மேலுள்ள sandboxes அனைத்தும் console-இல் error காட்டுகின்றன என்பதை கவனியுங்கள்:

Console
Warning: Each child in a list should have a unique “key” prop.

ஒவ்வொரு array item-க்கும் ஒரு key தர வேண்டும் — அந்த array-இல் உள்ள பிற items இடையே அதை unique ஆக அடையாளம் காணும் string அல்லது number:

<li key={person.id}>...</li>

Note

map() call-க்குள் நேரடியாக உள்ள JSX elements-க்கு எப்போதும் keys தேவை!

ஒவ்வொரு component எந்த array item-க்கு corresponds செய்கிறது என்பதை keys React-க்கு தெரிவிக்கும்; இதனால் பின்னர் அவற்றை match செய்ய முடியும். உங்கள் array items move ஆகலாம் (எ.கா. sorting காரணமாக), insert ஆகலாம், அல்லது delete ஆகலாம் என்றால் இது முக்கியமாகிறது. நன்றாகத் தேர்ந்தெடுத்த key, என்ன நடந்தது என்பதை React infer செய்து DOM tree-க்கு சரியான updates செய்ய உதவும்.

Keys-ஐ on the fly generate செய்வதற்குப் பதிலாக, அவற்றை உங்கள் data-க்குள் சேர்க்க வேண்டும்:

export const people = [{
  id: 0, // JSX-இல் key ஆக பயன்படுத்தப்படுகிறது
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
  accomplishment: 'spaceflight calculations',
  imageId: 'MK3eW3A'
}, {
  id: 1, // JSX-இல் key ஆக பயன்படுத்தப்படுகிறது
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
  accomplishment: 'discovery of Arctic ozone hole',
  imageId: 'mynHUSa'
}, {
  id: 2, // JSX-இல் key ஆக பயன்படுத்தப்படுகிறது
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
  accomplishment: 'electromagnetism theory',
  imageId: 'bE7W1ji'
}, {
  id: 3, // JSX-இல் key ஆக பயன்படுத்தப்படுகிறது
  name: 'Percy Lavon Julian',
  profession: 'chemist',
  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
  imageId: 'IOjWm71'
}, {
  id: 4, // JSX-இல் key ஆக பயன்படுத்தப்படுகிறது
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
  accomplishment: 'white dwarf star mass calculations',
  imageId: 'lrWQx8l'
}];
Deep Dive

ஒவ்வொரு list item-க்கும் பல DOM nodes-ஐ காட்டுதல்

ஒவ்வொரு item-மும் ஒன்று அல்ல, பல DOM nodes render செய்ய வேண்டுமானால் என்ன செய்வீர்கள்?

சுருக்கமான <>...</> Fragment syntax key pass செய்ய அனுமதிக்காது. எனவே அவற்றை single <div>-க்குள் group செய்ய வேண்டும், அல்லது சற்றே நீளமான, மேலும் explicit ஆன <Fragment> syntax-ஐ பயன்படுத்த வேண்டும்:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Fragments DOM-இலிருந்து மறைந்துவிடும்; எனவே இது <h1>, <p>, <h1>, <p> போன்ற flat list ஒன்றை உருவாக்கும்.

உங்கள் key எங்கிருந்து பெறுவது

வெவ்வேறு data sources வெவ்வேறு key sources வழங்குகின்றன:

  • Database-இலிருந்து data: உங்கள் data database-இலிருந்து வந்தால், இயல்பாகவே unique ஆன database keys/IDs பயன்படுத்தலாம்.
  • Locally generated data: உங்கள் data locally generate செய்து persist செய்யப்படுமானால் (எ.கா. note-taking app-இல் notes), items create செய்யும்போது incrementing counter, crypto.randomUUID(), அல்லது uuid போன்ற package பயன்படுத்துங்கள்.

Keys-ன் விதிகள்

  • Keys siblings இடையே unique ஆக இருக்க வேண்டும். ஆனால் வேறு arrays-இல் உள்ள JSX nodes-க்கு அதே keys பயன்படுத்துவது பரவாயில்லை.
  • Keys மாறக்கூடாது; இல்லையெனில் அவற்றின் நோக்கம் கெடும்! Rendering போது அவற்றை generate செய்ய வேண்டாம்.

React-க்கு keys ஏன் தேவை?

உங்கள் desktop-இல் உள்ள files-க்கு பெயர்கள் இல்லை என்று கற்பனை செய்யுங்கள். அதற்கு பதிலாக, அவற்றை அவற்றின் order மூலம் குறிப்பிடுவீர்கள் — முதல் file, இரண்டாவது file போன்றது. அதற்கு பழகிக்கொள்ளலாம்; ஆனால் ஒரு file delete செய்தவுடன் குழப்பமாகும். இரண்டாவது file முதல் file ஆகும், மூன்றாவது file இரண்டாவது file ஆகும், இப்படி தொடரும்.

Folder-இல் file names மற்றும் array-இல் JSX keys ஒரேபோன்ற நோக்கத்தை நிறைவேற்றுகின்றன. Siblings இடையே ஒரு item-ஐ unique ஆக identify செய்ய அவை உதவுகின்றன. நன்றாகத் தேர்ந்தெடுத்த key, array-க்குள் உள்ள position-ஐ விட அதிக தகவல் தரும். Reordering காரணமாக position மாறினாலும், key அந்த item-ஐ அதன் lifetime முழுவதும் React identify செய்ய அனுமதிக்கிறது.

Pitfall

Array-இல் உள்ள item-ன் index-ஐ key ஆக பயன்படுத்த tempted ஆகலாம். உண்மையில், நீங்கள் key ஒன்றும் specify செய்யாவிட்டால் React அதையே பயன்படுத்தும். ஆனால் item insert, delete, அல்லது array reorder செய்யப்பட்டால், நீங்கள் items render செய்யும் order காலப்போக்கில் மாறும். Index-ஐ key ஆக பயன்படுத்துவது அடிக்கடி subtle மற்றும் confusing bugs-க்கு வழிவகுக்கும்.

அதேபோல், key={Math.random()} போன்ற முறையில் keys-ஐ on the fly generate செய்ய வேண்டாம். இதனால் renders இடையே keys ஒருபோதும் match ஆகாது; அதனால் உங்கள் components மற்றும் DOM ஒவ்வொரு முறையும் recreate செய்யப்படும். இது மெதுவாக இருப்பதோடு மட்டுமல்லாமல், list items-க்குள் உள்ள எந்த user input-ஐயும் இழக்கும். அதற்கு பதிலாக, data அடிப்படையிலான stable ID பயன்படுத்துங்கள்.

உங்கள் components key-ஐ prop ஆக receive செய்யாது என்பதை நினைவில் கொள்ளுங்கள். React தானாகவே hint ஆக மட்டும் இதைப் பயன்படுத்தும். உங்கள் component-க்கு ID தேவைப்பட்டால், அதை separate prop ஆக pass செய்ய வேண்டும்: <Profile key={id} userId={id} />.

Recap

இந்த page-இல் நீங்கள் கற்றது:

  • Components-இலிருந்து data-வை arrays மற்றும் objects போன்ற data structures-க்குள் move செய்வது எப்படி.
  • JavaScript-ன் map() மூலம் ஒத்த components sets உருவாக்குவது எப்படி.
  • JavaScript-ன் filter() மூலம் filtered items arrays உருவாக்குவது எப்படி.
  • ஒரு collection-இல் ஒவ்வொரு component-க்கும் key ஏன், எப்படி set செய்வது; position அல்லது data மாறினாலும் React ஒவ்வொன்றையும் track செய்ய இதனால் முடியும்.

Try out some challenges

Challenge 1 of 4:
List-ஐ இரண்டாகப் பிரித்தல்

இந்த example எல்லா people-ன் list-ஐ காட்டுகிறது.

அதை ஒருவருக்குப் பிறகு ஒருவர் இரண்டு தனி lists காட்டுமாறு மாற்றுங்கள்: Chemists மற்றும் மற்றவர்கள். முன்பைப் போலவே, person.profession === 'chemist' check செய்து ஒருவர் chemist தானா என்பதை தீர்மானிக்கலாம்.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        இதற்குப் புகழ்பெற்றவர்: {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>விஞ்ஞானிகள்</h1>
      <ul>{listItems}</ul>
    </article>
  );
}
Previousநிபந்தனை ரெண்டரிங்
Nextகாம்போனென்ட்களை தூயதாக வைத்தல்