ReactJS Lists dan Keys

Memahami cara membuat ReactJS Lists dan Keys.

src/components/SeriesList/index.css

src/components/SeriesList/index.js

src/containers/Series/index.js

src/components/App/index.js

Uppss! ada warning!

Bila kita lupa memberi key pada li maka akan diwarning.

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

Check the render method of `SeriesList`. See https://fb.me/react-warning-keys for more information.
    in li (at SeriesList/index.js:9)
    in SeriesList (at Series/index.js:35)
    in div (at Series/index.js:33)
    in Series (at App/index.js:14)
    in div (at App/index.js:12)
    in App (at src/index.js:9)


Untuk pesan warning diatas maka kira gunakan tambahan property berikut:

<ul className="series-list">

{props.list.map(series => (

<li key={series.show.id}> {series.show.name} </li>

))}

</ul>

Maka kita akan terbebas dari pesan warning tersebut.

Hasil Tampilan di Browser

Sedikit Penyesuaian src/components/SeriesList/index.js

Sumber
https://www.udemy.com/react-fundamentals/learn/lecture/9115570#overview
https://www.udemy.com/react-fundamentals/learn/lecture/9156068#overview