Data Science
How do you give keys in React
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.
|
Output:
1. Jaipur 2. Jodhpur 3. Udaipur 4. Pune 5. Chandigarh |
Example: Correct usage of the Key.
function CityList(props) {
const city = props.city;
return (
//Specifying the key here is a wrong practice.
|
Output:
1. Jaipur 2. Jodhpur 3. Udaipur 4. Pune 5. Chandigarh |
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 = (
{show.name}: {show.remark}{name} ); } const info = [ {id: 10, name: 'Joy', remark: 'Good!!'}, {id: 20, name: 'Happy', remark: 'Excellent!!'}, {id: 30, name: 'Smiley', remark: 'Keep Going!!'} ]; ReactDOM.render( , document.getElementById('app') ); export default App;{remark} |
0 comments