Fundamentals of React - Handling State

Exercise: Liquid State


Exercise: Liquid State

1) We need 3 input fields. When finished you should have 3 fields with the "Liter", "Pint", and "Gallon" labels (one each).
- Duplicate <LiquidInput /> in <App /> until you have 3
- Change the titles for 2nd and third for Pint and Gallon.

2) Currently you cannot enter amounts in the inputs fields. Fix that.
- Add state for the input number to <LiquidInput/>
- Update the state in the handleInputChange() event handler.
  - You can access the new value with ""
- Ensure the value on the input field comes from state.

3) Ensure that changing one input updates the others with the correct conversion amount.
- Lift state up from <LiquidInput/> to <App/>
- Create state variables for each field in <App/>
- Pass the amount from state down to each input
- Move event handlers up to App, and ensure each field has an event handler
- Pass the event handlers down to each input for the onChange event

4) Abbreviate the decimals down to 2.
- google "mdn toFixed"