Reactjs Key Warnings

By: Stephen Patrick | 22 Aug 2016 | Category: ReactJs Introduction

Related Contents

Reactjs Key Warnings

Reactjs allows us to render and create a number of dynamic elements and add them to the browser DOM tree. Moreover, when these elements are added to the DOM tree, giving the nature of dynamic web applications, JavaScript can be used to change the order of these elements. The order could be changed through crud operations, such as add, edit delete, sorting operations, drag and drop operations etc.

In order for Reactjs to correctly handle these kinds of operations it needs elements to have a unique key so it can uniquely identify them. If we look at the browser console window, when running previous examples that contained a collection of child components we would see a warning.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Table`. See https://fb.me/react-warning-keys for more information.
   in th (created by Table)
   in Table

To fix this, we need to add a unique key property to each element. This key could be generated on the server, generated on the client etc .

var headings = this.props.headings.map(
   function(header, index) {
       return <th key={index}>{header}</th>
});

To fix the previous simple examples a key property is added using the index of the array element supplied by the array map function.