CODEWITHSUNDEEP
javascriptlistreactjs
李文浚
李文浚

Reputation: 15

the detail in react list render

for the first way in render(): 

const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>]
return (
<ul>{arr}</ul>
);

it runs occur a warning which i can understand:
Warning: Each child in an array or iterator should have a unique 'key' prop.

but for other way: 

  return (
    <ul>
      <li>{numbers[0]}</li>
      <li>{numbers[0]}</li>
      <li>{numbers[1]}</li> 
    </ul>
  );

It runs ok,no warning..

the two ways to render a list above should generate the same virtual dom。but i dont understand why the second way runs with no warning like the first way happen.
can somebody tells why? thanks!

Upvotes: 1

Views: 82

Answers (1)

Alexander Elgin
Alexander Elgin

Reputation: 6956

It is React requirement for loops. You can find more info on https://reactjs.org/docs/lists-and-keys.html

Upvotes: 2

Related Questions