1

I'm building a React APP to fetch movies and allow to comment them adding also vote/rate. The user can comment and vote for the movie. What I did is to make an option tag and use map to create my rating values a user can choose.

This is a part of the code:

<FormGroup>
  <Label for="rate">Rate(Out of 5)</Label>
    <Input
     type="select"
     name="rate"
     value={rate}
     onChange={this.onChange}
     style={{width: 200}}>
     {ratings.map(rating => (
     // eslint-disable-next-line react/jsx-key
     <option>{rating}</option>
              ))}
    </Input>
   </FormGroup>

On the option tag line I'm getting the following error:

Warning: Each child in a list should have a unique "key" prop.

I have no idea how to take off of this warning and would like to have some suggestions also why I'm getting this so I can avoid it in the future.

My code fully is here: https://pastebin.com/qvReLYPy

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Jakub
  • 2,367
  • 6
  • 31
  • 82
  • 1
    Deleted my answer because even though its most likely safe for your case, its not recommended in most use cases since the array might change. Here are the react [docs on the subject](https://reactjs.org/docs/lists-and-keys.html#keys) – Brian Thompson Nov 27 '19 at 16:43

1 Answers1

3

It's because when you loop through an array and return a react component, you need to give it a key so react knows when to update it.

Inside your <option /> simply add a key={rating} prop

Karl Taylor
  • 4,839
  • 3
  • 34
  • 62