matching pattern

[BakriSusanto]

Hi...everyone
I don't understand about field matching pattern in final-form calculate. May be someone can help me.
I have a case like picture below. and i want my form can calculate every time user input quantity and price/unit and the result display in total price. And in the last row can display total of the total price.

here is part of my code
<Table.Body> <FieldArray name="items"> {({ fields }) => fields.map((item, index) => ( <Table.Row key={index}> <Table.Cell textAlign="center"> {index + 1} </Table.Cell> <Table.Cell> <Field placeholder="Name" name={${item}.name} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell> <Field placeholder="Quantity" name={${item}.quantity} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="left"> <Field placeholder="Unit" name={${item}.unit} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Price Per Unit" name={${item}.pricePerUnit} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Total price" name={${item}.totalPrice} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell> <Button floated="right" icon color="red" labelPosition="left" size="small" type="button" onClick={() => pop("items")} > <Icon name="minus" /> Remove </Button> </Table.Cell> </Table.Row> )) } </FieldArray> <Table.Row> <Table.Cell colSpan="5" textAlign="right"> <strong>TOTAL</strong> </Table.Cell> <Table.Cell colSpan="2" textAlign="right"> <Field name="amountBeforeTax" placeholder="Amount Before Tax" value={purchase.amountBeforeTax} component={NominalInput} /> </Table.Cell> </Table.Row> </Table.Body>