Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • How do you give keys in React
  • Learn React

How do you give keys in React

Spoke Right December 13, 2022 2 min read

Add Your Heading Text Here

React Keys
A key is a unique identifier which is used to identify which items have changed, updated, or deleted from the Lists and to determine which components in a collection needs to be re-rendered.

Using Keys with the component:

Example: Incorrect usage of the Key.

import React from 'react';   
import ReactDOM from 'react-dom';   
function CityList(props) {  
const city = props.city;  
return (  
//Specifying the key here is a wrong practice.  
<li key={city.toString()}>  
{city}  
</li>  
);  
}  
function CityNames(props) {  
const citylist = props.citylist;  
const cityname = citylist.map((strLists) =>  
// Specifying the key here is a right practice.  
<CityList city={strLists} />  
);  
return (  
<div>  
<h2>Incorrect Key Usage</h2>  
<ol>{cityname}</ol>  
</div>  
);  
}  
const citylist = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
<CityNames citylist={citylist}/>,  
document.getElementById('app')  
);  
export default App;

Example: Correct usage of the Key.

function CityList(props) {  
const city = props.city;  
return (  
//Specifying the key here is a wrong practice.  
<li> {city} </li>  
);  
}  
function CityNames(props) {  
const citylist = props.citylist;  
const cityname = citylist.map((strLists) =>  
// Specifying the key here is a right practice.  
<CityList key={citylist.toString()} city={strLists} />  
 );  
return (  
<div>  
<h2>Correct Key Usage</h2>  
<ol>{cityname}</ol>  
</div>  
);  
}  
const citylist = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
<CityNames citylist={citylist}/>,  
document.getElementById('app')

The uniqueness of Keys among Siblings:

In an array, the keys assignment must be unique among their siblings. However, we can use the same set of keys in producing two different arrays.

Example:

import React from 'react';   
import ReactDOM from 'react-dom';   
function Menulist(props) {  
const Names = (  
<ol>  
{props.info.map((show) =>  
<li key={show.id}>  
{show.name}  
</li>  
)}  
</ol>  
);  
const remark = props.info.map((show) =>  
<div key={show.id}>  
<h3>{show.name}: {show.remark}</h3>      
</div>  
);  
return (  
<div>  
{name}  
<hr />  
{remark}  
</div>  
);  
}  
const info = [  
{id: 10, name: 'Joy', remark: 'Good!!'},  
{id: 20, name: 'Happy', remark: 'Excellent!!'},  
{id: 30, name: 'Smiley', remark: 'Keep Going!!'}  
];  
ReactDOM.render(  
<Menulist info={info} />,  
document.getElementById('app')  
);  
export default App;

Continue Reading

Previous: What are lists in ReactJS
Next: How do you use refs in React

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.