the detail in react list render

Question

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!

Answer 1

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