Warning: Each child in an array or iterator should have a unique "key" prop. React two button function conflict

Question

In React, I have two buttons being rendered and I am getting this warning:

Warning: Each child in an array or iterator should have a unique "key" prop.

Here is my code:

import React, { Component } from 'react';
import Content from './HomeItem';
import { Container, Row } from 'reactstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

const HomePage = props => {
  const tvshow = props.item;
  let res;

  if (tvshow.length > 0) {
    res = tvshow.map(res => (
      <Content item={res} onClick={props.onClick} onClick={props.onClick} />
    ));
  }

  return (
    <div>
      <Container>
        <Row>{res}</Row>
      </Container>
    </div>
  );
};

export default HomePage;

Chellappan வ · Answer 1 · 2018-10-31T09:27:26.487

1

You should use key Keys

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:

 onClick=(e,res)={
   console.log(res);
   }

  if (tvshow.length > 0) {
    res = tvshow.map((res,index) => (
      <Content item={res} key={index onClick={this.onClick.bind(this,res)} />
    ));
  }

Documentation:https://reactjs.org/docs/lists-and-keys.html#keys

edited Oct 31 '18 at 09:27

answered Oct 30 '18 at 15:43

Chellappan வ

23,645
3
29
60

Thanksss, I have another problem. No duplicate props allowed react/jsx-no-duplicate-props – Brandon Oct 31 '18 at 02:04
check this:https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md – Chellappan வ Oct 31 '18 at 03:45
I have two onClick functions, how do I use props.onClick({data})? – Brandon Oct 31 '18 at 06:09
I tried your code, but both of my buttons still reading the same function and the error still there. :( Here is my HomeItem.js: const HomeItem = props => { function handleSubmit() { props.onClick({ name: props.item.name, id: props.item.id }); } function handleName() { props.onClick({ name: props.item.name }); } – Brandon Oct 31 '18 at 09:15
Here is my App.js: handleSubmit(newFavorite) {} handleName(newFavorite) {} render() { ( )} /> – Brandon Oct 31 '18 at 09:19
can you create stackblitz or ref this link:https://stackoverflow.com/questions/41338981/react-js-click-event-within-a-for-loop – Chellappan வ Oct 31 '18 at 09:27

score 0 · Accepted Answer · edited Oct 30 '18 at 15:48

0

Keys

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:

if (tvshow.length > 0) {
    res = tvshow.map((res,index) => (
      <Content item={res} key={index} onClick={props.onClick}/>
    ));
  }

edited Oct 30 '18 at 15:48

Chellappan வ

23,645
3
29
60

answered Oct 30 '18 at 15:47

Asim Khan

1,969
12
21

Thanksss, I have another problem. No duplicate props allowed react/jsx-no-duplicate-props. – Brandon Oct 31 '18 at 02:04
this is because onClick is being passed twice in your code. I've removed that duplicate onCLick in my snipped already. @Brandon – Asim Khan Oct 31 '18 at 04:43
Okay, I see that. But how do I use props.onClick({data}) if I have two onClick functions? – Brandon Oct 31 '18 at 06:07
Here is my HomeItem.js a: const HomeItem = props => { function handleSubmit() { props.onClick({ name: props.item.name, id: props.item.id }); } function handleName() { props.onClick({ name: props.item.name }); } – Brandon Oct 31 '18 at 09:20
Here is my App.js: handleSubmit(newFavorite) {} handleName(newFavorite) {} render() { ( )} /> – Brandon Oct 31 '18 at 09:20
In app.js you don't really have to name it as onClick. try this code `` – Asim Khan Oct 31 '18 at 10:18
and in HomeItem.js `const HomeItem = props => { function handleSubmit() { props.handleSubmit({ name: props.item.name, id: props.item.id }); } function handleName() { props.handleName({ name: props.item.name }); }` – Asim Khan Oct 31 '18 at 10:20
Hi thank you so much help but I got two error. Uncaught TypeError: props.handleName is not a function Uncaught TypeError: props.handleName is not a function :((( – Brandon Oct 31 '18 at 10:49
please share your code on jsfiddle or plunkr whichever suits you. probably you forgot to create handleName(){} in app.js or may be there are some spelling mistakes – Asim Khan Oct 31 '18 at 11:41

Warning: Each child in an array or iterator should have a unique "key" prop. React two button function conflict

2 Answers2