Unbound record field name in Reason Component - reason

Question

Borrowing just about all of Yawar's helpful answer, I have the following:
$cat src/index.re
let products = [|
{name: "Football", price: 49.99},
{name: "Basebll", price: 1.99},
{name: "Poker", price: 33.99}
|];
ReactDOMRe.renderToElementWithId(
<ProductTable products />
);
$cat src/productRow.re
let component = ReasonReact.statelessComponent("ProductRow");
let echo = ReasonReact.stringToElement;
let make = (~name: string, ~price: float, _) => {
...component,
render: (_) => {
<tr>
<td>{echo(name)}</td>
<td>{price |> string_of_float |> echo}</td>
</tr>
}
};
$cat src/ProductTable.re
let component = ReasonReact.statelessComponent("ProductTable");
let echo = ReasonReact.stringToElement;
let make = (~products, _) => {
...component,
render: (_) => {
let productRows = products
|> Array.map(({name, price}) => <ProductRow key=name name price />)
|> ReasonReact.arrayToElement;
<table>
<thead>
<tr>
<th>{echo("Name")}</th>
<th>{echo("Price")}</th>
</tr>
</thead>
<tbody>productRows</tbody>
</table>
}
}
I'm getting the following compile-time error:
7 ┆ render: (_) => {
8 ┆ let productRows = products
9 ┆ |> Array.map(({name, price}) => <ProductRow key=name name price />
)
10 ┆ |> ReasonReact.arrayToElement;
11 ┆
Unbound record field name
How can I fix this compile-time error?

Answer 1

The Reason compiler will infer a lot of types for you but for records, you have to first declare what fields it has (and their types) ahead of time.
Pulling from #yawar's helpful answer, you simply need to include the type definition at the top of your file:
type product = {name: string, price: float};
With that, the compiler will be able to tell that products is of type array(product) and should continue along happily from there. Give it a try here