React Warning: Each child in a list should have a unique "key" prop. in render() function

Question

I am calling an API endpoint, saving it's data to a state and then rendering it. It's displaying in the browser but there is a warning on the console: Warning: Each child in a list should have a unique "key" prop..

My app.js:

class App extends Component {
  render () {
    return (
      <div>
        <Profile profiles={this.state.profile} />
      </div>
   )
  }
  state = {
    profile: []
  };

  componentDidMount() {
    fetch('http://127.0.0.1:8000/profiles')
    .then(res => res.json())
    .then((data) => {
      this.setState({ profile : data })
    })
    .catch(console.log)
  }
}
export default App;

I don't understand where do I put the key prop in render(). This is my snippet profile.js:

const Profile = ({ profiles }) => {
  return (
    <div>
      <center><h1>Profiles List</h1></center>
      {profiles.map((profile) => (
        <div className="card">
          <div className="card-body">
            <h5 className="card-title">{profile.first_name} {profile.last_name}</h5>
            <h6 className="card-subtitle mb-2 text-muted">{profile.dob}</h6>
            <p className="card-text">{profile.sex}</p>
          </div>
        </div>
      ))};
    </div>
  )
};

export default Profile;

What improvement do the key prop brings over not using it? I am getting overwhelmed with these <div>...</div> tags.

score 5 · Accepted Answer · answered May 18 '20 at 18:08

5

If you use map in your JSX return then you need to provide the parent element with the key prop so that it's uniquely identified.

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

You would preferably use an object ID but if you know a field (or combinations of fields) that would constitute a unique key then you could use that instead:

{profiles.map((profile) => (
  <div 
    key={'profileList_'+profile.first_name+profile.last_name} 
    className="card"
  >
    ...
  </div>
)};

NOTE: In the example I used profileList_ as a prefix just in case you need to use the same unique identifier (object ID or in this case profile.list_name+profile.last_name) as a key somewhere else in a different context.

answered May 18 '20 at 18:08

bilwit

799
1
5
9

2

The prefix is useless because the `key` is only relevant among its siblings. When it's not provided, React falls back to the index by default. – Emile Bergeron May 18 '20 at 18:18
Why using only the id as key `{profile.id}` didn't work? – forest May 18 '20 at 18:21
2

@BhaskarS. the `id` property probably doesn't exist in your object which is what I assumed – bilwit May 18 '20 at 18:29
1

Oh yes, I didn't call the id in the api call. – forest May 18 '20 at 18:58

score 3 · Answer 2 · answered May 18 '20 at 18:04

3

you have to set uniq value to key props to the first div inside map

{profiles.map((profile) => (
        <div key={profile.id} className="card">

read the doc

answered May 18 '20 at 18:04

IT's Bruise

824
5
11

Solution from @bilwit worked by taking a combination of fields as key. – forest May 18 '20 at 18:14
This would have worked had i called the **id** through the endpoint. – forest May 18 '20 at 19:00
1

no matter what you will use it just have to be uniq value for each item, and you don't have to use index – IT's Bruise May 18 '20 at 19:11

React Warning: Each child in a list should have a unique "key" prop. in render() function

2 Answers2

Linked