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.