-4

I'm using the child component inside the parent component. Like below,

class Parent extends Component() {
  getContent() {
    let arr = [{name: 'abc'},{name: 'bcd'},{name: 'cde'}];
    return arr.map(data => <Child name={data.name}/>)
  }  

  render() {
    return (
      <div>{this.getContent()}</div>
    )
  }
}

Above code gives warning

Each child in an array should have a unique "key" prop. Check the render method of TableComponent

I don't want the answer like use the unique key as props in child component. Instead please clarify the point why react gives such type of warning what will be the drawback if I don't use the unique key here. Please provide the example of this causes.

bennygenel
  • 23,896
  • 6
  • 65
  • 78
shubham AK
  • 292
  • 1
  • 3
  • 13
  • 5
    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) – poke Sep 27 '17 at 12:07
  • 1
    See in particular [the second most-upvoted answer](https://stackoverflow.com/a/43892905/216074) for an in-depth explanation on what the `key` is used for. – poke Sep 27 '17 at 12:08

1 Answers1

0

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

Boudewijn van Veen
  • 427
  • 4
  • 7