top of page
Logo der Online Agentur mdwp

Keys

Keys in React JS are special attributes used by the React library to efficiently and reliably identify different elements in the DOM tree, especially in dynamic and complex structures. Such occurs where changes due to user interactions, data updates, etc. may cause alterations to certain parts of the DOM.

Keys are usually given to elements inside the array to give the elements a stable identity. They help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that identifies a list item unambiguously.

Here is a basic example for clarity. Let's say we have a list of messages, and we want to display them dynamically:

```jsx
const messages = ['First message', 'Second message', 'Third message'];

class MessageList extends React.Component {
render() {
const messageItems = messages.map((message, index) =>
<li key={index}>{message}</li>
);
return (
<ul>{messageItems}</ul>
);
}
}

ReactDOM.render(<MessageList />, document.getElementById('root'));
```

In the code above, we assign a unique "key" to each dynamically generated `<li>` element inside `map()` function, using the index of each message in the array as a placeholder. Please note that using the index as a key is only applicable if the list does not change. If the list can change, it's better to use unique string IDs.

bottom of page