Arrays and Keys
Keys help React identify which elements have been changed, added, or removed throughout each render.
type movie = {title: string, desc: string}
let movies = [{title: "Dark", desc: "scifi"}, {title: "Looper", desc: "scifi"}]
module Movie = {
@react.component
let make = (~title: string, ~desc: string) => {
<div>
<h1> {title->React.string} </h1>
<p> {desc->React.string} </p>
</div>
}
}
@react.component
let make = () => {
<div>
{
movies
->Belt.Array.map(({title, desc}) => <Movie key={title} title desc />)
->React.array
}
</div>
}