Not using key props when using Array map method
We usually use the array map method to display a list of items stored in an array. We can render a list of items in the following manner:
Javascript
const lists = [ 'obj1' , 'obj2' , 'obj3' ]; render() { return ( <ul> {lists.map(item => <li>{item}</li>)} </ul> ); } |
The above code may work for smaller applications. But sometimes you may run into render issues while trying to modify or delete items from the list. React has to keep track of each of the list elements on the DOM. So key props help React to identify which items have been modified or deleted. To give a unique id to each and every element inside the array, a key prop is required. Often we don’t use a key prop when using the Array map method, but sometimes it may create some issues.
We can add a key to all your list elements in the following:
Javascript
const lists = [ 'obj1' , 'obj2' , 'obj3' ]; render() { return ( <ul> {lists.map(item => <li key={item}>{item}</li>)} </ul> ); } |
Most Common Mistakes That React Developers Make
React is a JavaScript library for building user interfaces. During the process of developing a React app, we made a lot of common mistakes. That’s not a problem that we make mistakes, but it’s always a problem more than anything else if we don’t learn something by making a mistake. In this article, we will learn about the Top 5 most common mistakes that React developers make.
Some mistakes that react developers makes are given below:
Table of Content
- Fail to Proper Structure Application:
- Not Capitalizing Component Name:
- Using class instead of className:
- Calling Hooks from Class Components
- Not using key props when using Array map method