Putting Components Together

Let’s use our shirt data structure to create a web page that lets you specify shirt orders and put them in a table. Here’s what it looks like with three valid orders and then trying to add an order with a negative quantity:

images/react_images/shirt_example.png

The data entry form, which holds the strings from the input fields, an array of the orders entered so far, and the error message to display, will be the responsibility of a single stateful OrderForm component whose state looks like this:

 type​ ​state​ = {
 qtyStr​: ​string​,
 size​: ​Shirt​.Size.t,
 sleeve​: ​Shirt​.Sleeve.t,
 color​: ​Shirt

Get Web Development with ReasonML now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.