Causes when not using the key in react

Question

I'm getting this error 'Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of', When not adding the key in child component.

Why is this key necessary include here? because without this also component render correctly.

component - (parent)

import React, { Component } from 'react';
import ChildKey from './ChildKey';
import './App.css';

class ParentKey extends Component {
  constructor() {
    super();
    this.state = {
      keyList: [{
        name: 'key1',
      },{
        name: 'key1',
      },{
        name: 'key1',
      },{
        name: 'key1'
      }]
    }
  }

  render() {
    const {keyList} = this.state;

    return (
      <div style={{marginLeft: '40%'}}> 
        <h1>Parent Component</h1> 
        <br/>
        <div>
        {
          keyList && keyList.map((data, index) => <ChildKey name={data.name} />)
        }
        </div>
      </div>
    )  
  }

}

export default ParentKey;

component (children) -

import React, {Component} from 'react';

export default class ChildKey extends Component {
  constructor() {
    super();
  }

  getStyle() {
    return {
      rootStyle: {
        width: '40px',
        height: '40px',
        display: 'block'
      }
    }
  }

  render() {
    const styles = this.getStyle();
    return (
      <div style={styles.rootStyle}>
        <div>{this.props.name}</div>
      </div>
    )
  }
}

Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Felix Kling, Sep 27 '17 at 00:51

Alexander Vitanov · Answer 1 · 2017-09-27T01:01:36.073

0

It is necessary in keyList && keyList.map((data, index) => <ChildKey name={data.name} />) because when one row changes React needs to know which row changed and it will update only that specific row. Otherwise React will re-render all the rows and this is not good for the performance

Example: keyList && keyList.map((data, index) => <ChildKey key={data.name} name={data.name} />)

edited Sep 27 '17 at 01:01

answered Sep 27 '17 at 00:54

Alexander Vitanov

4,074
2
19
22

Can you please give me an example for that? – Shubham Sep 27 '17 at 00:59
Updated the answer with an example – Alexander Vitanov Sep 27 '17 at 01:01
1

I know how to use the key. But can you give me an example for what disadvantages if not using the key? – Shubham Sep 27 '17 at 01:05
Let's say you render facebook timeline. The user scrolls to the 100th post and likes it, therefore the thumb should become darker. If the posts have no keys React will block the UI rerendering all the timeline posts, while if there are keys it will only rerender the 100th post – Alexander Vitanov Sep 27 '17 at 01:09
thanks for the example. But can you please explain me its causes using my example? – Shubham Sep 27 '17 at 01:19
This answer fully answers your question. It may be confusing because it takes a while to understand react's DOM update algorithm. – Andy Ray Sep 27 '17 at 01:52

Causes when not using the key in react

1 Answers1