Even after specifying the id of elements in an array in react,this error 'Each child in a list should have a unique "key" prop.'

Question

I have tried interchanging the words key and id and still its showing the error of 'Each child in a list should have a unique "key" prop. Check the render method of Counters. in Counter (at Counters.jsx:17) in Counters (at src/index.js:10)'

import React, { Component } from "react"; // this is counters.jsx file.
import Counter from "./Counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 21, value: 4 },
      { id: 22, value: 2 },
      { id: 33, value: 3 },
      { id: 44, value: 0 }
    ]
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter key={Counter.id  } value={Counter.value} selected={true} />
        ))}
      </div>
    );
  }
}

export default Counters;

Counter. import React, { Component } from "react"; //this is counter.jsx file.

class Counter extends Component {
  state = {
    count: 0
  };

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    console.log("props", this.props);
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncrement}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

Answer 1

You have issue here, instead of counter you are using Counter to pass data

Just change this,

{this.state.counters.map(counter => (
  <Counter key={Counter.id  } value={Counter.value} selected={true} />
))}

to

{this.state.counters.map(counter => (
  <Counter key={counter.id} value={counter.value} selected={true} />
))}

Answer 2

You need to use the id and value from your data

key={Counter.id } value={Counter.value} 

should be

key={counter.id } value={counter.value} 

Answer 3

Its because of the key you are passing don't have any value,

Instead of using "counter" which was same as class name. I would recommend to use data/item while iterating the data from map().

<div>
   {this.state.counters.map(item => (
      <Counter key={item.id} value={item.value} selected={true} />
   ))}
</div>

class Counters extends Component {
  state = {
    counters: [
      { id: 21, value: 4 },
      { id: 22, value: 2 },
      { id: 33, value: 3 },
      { id: 44, value: 0 }
    ]
  };
  render() {
    return (
      <div>
        {this.state.counters.map(item => (
          <Counter key={item.id} value={item.value} selected={true} />
        ))}
      </div>
    );
  }
}

Happy Coding!!