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; |
