Hello ReactJS Friends,
In this blog, we will learn ReactJS keys with examples.
In ReactJS, a key is used to give a unique identifier to each element in an array or iterable object when rendering a list of components. Key helps React efficiently update and reorder the elements in the list by providing a way to distinguish between items.
The key should be assigned to the top-level JSX element produced by the array mapping function. It should be a string or a number and must be unique among siblings. Using a stable and unique identifier, such as an ID from your data source, is recommended rather than using an index as the key value.
Learn – Basics of ReactJS Keys
Using the key prop correctly helps React efficiently update and reorder the list when necessary. It is useful when we dynamically create components or when the users are after the lists. It’s especially important when working with dynamic lists, as it allows React to optimize the rendering process and provide better performance.
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ]; const updatedLists = sportsLists.map((sports)=>{ <li key={sports.id}> {sports} </li>; });
In the above example, we have no ID so we can assign the item’s index as a key list like below
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ]; const updatedLists = sportsLists.map((sports, index)=>{ <li key={index}> {sports} </li>; });
Consider you have created a separate component for ListItem and extracted ListItem from that component. In this case, you should have to assign keys to the <ListItem /> elements in the array, not to the <li> elements in the ListItem itself. To avoid mistakes, you must remember that keys only make sense in the context of the surrounding array. So, anything you are returning from the map() function is recommended to be assigned a key.
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { const item = props.item; return ( // No need to specify the key here. <li> {item} </li> ); } function NameList(props) { const sportsLists = props.sportsLists; const listItems = sportsLists.map((strLists) => // The key should have been specified here. <ListItem key={sportsLists.toString()} item={strLists} /> ); return ( <div> <h2>Correct Key Usage Example</h2> <ol>{listItems}</ol> </div> ); } const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ]; ReactDOM.render( <NameList sportsLists={sportsLists}/>, document.getElementById('app') ); export default App;
Hope you understand ReactJS Keys using Component. Share the article with your friends, and stay in touch with us to learn more about ReactJS.
Happy Coding!
Node.js, known for its asynchronous and event-driven architecture, offers a multitude of built-in modules that…
Google has officially rolled out its much-anticipated August 2024 Core Update on August 15, 2024,…
In e-commerce, it's important to understand that it's not just about running an online store.…
In modern web development, building dynamic, interactive front-end applications is essential. Laravel, a powerful PHP…
Laravel, known for its elegant syntax and ease of use, has continually refined its core…
As we continue to innovate and enhance the Magento 2 ecosystem, August 2024 has been…