What are keys and its significance in Listing in React JS ?

Keys in React JS help to identify which items in the list have been changed, are removed, or are added. Keys are used as props to our map operator while iterating the list. We cannot use keys in React as props to the child component. It is mostly recommended to use Strings as unique keys.

Below are the different ways to use keys let’s see:

Syntax: We are using a map operator to iterate a list that is returning the items.

{list.map((item => {
    return (<li key="key">{item}</li>)
})}

Example: We will start by constructing simple array nums and then we are iterating over it.

Javascript

// App.js

const num = [1, 2, 3, 4];

function App() {
    return (
        <div className="App">
            <li>
                {num.map(item => {
                    return (
                        <option>{item}</option>
                    );
                })}
            </li>
        </div>
    );
}

export default App;

Console Log: We will see errors, asking for unique keys so that it becomes easier to know which element has been edited or changed, or removed.

Using the key property:

Now, we will add the key property to the list of items. We can use the item themselves as the keys as the array contains distinct elements hence it will not be a problem.

Javascript

const num = [1, 2, 3, 4];

function App() {
    return (
        <div className="App">
            <ul>
                {num.map(item => {
                    return (
                        <option key={item}>
                            {item}
                        </option>
                    );
                })}
            </ul>
        </div>
    );
}

export default App;

Console Log: Now, we can see no more errors in the console.

However, this is not an ideal way of defining the key as an array with duplicate elements will assign duplicate keys and it would throw an error. For example, using the below array as keys, we will get the following output.

const num = [1,2,3,4,1];

Console Log: It will show the error that two children have the same keys.

Using the index of the map function as keys:

We can also pass the indices of the elements that are provided by the map function as the keys of the list items. This will eliminate the case where the items themselves are not distinct.

Javascript

// App.js

const num = [1, 2, 3, 4, 1];

function App() {
    return (
        <div className="App">
            <ul>
                {num.map((item, index) => {
                    return (
                      <option key={index}>
                          {index} > {item}
                      </option>)
                })}
            </ul>
        </div>
    );
}

export default App;

Output:

An Ideal Solution:

In the case of a dynamic list, where it may be filtered or reordered, the above approach will not work properly leading to unstable component behavior. If you already have a unique id mentioned in the list to be displayed, you can always use that as your key.

Example: Let’s suppose an example of an array of colors that are having some ids that we will be using as our keys.

Javascript

const colors = [
    {
        id: 1,
        value: "red"
    }, {
        id: 2,
        value: "green"
    }, {
        id: 3,
        value: "black"
    }
];

function App() {
    return (
        <div className="App">
            <ul>
                {colors.map(item => {
                    return (
                        <option key={item.id}>
                            {item.value}
                        </option>
                    )
                })}
            </ul>
        </div>
    );
}

export default App;

Output: