Outline
Outline
Exercise: Liquid State
https://stackblitz.com/edit/react-whafbb
Objectives
1) We need 3 input fields. When finished you should have 3 fields with the "Liter", "Pint", and "Gallon" labels (one each).
Hints:
- 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.
Hints:
- Add state for the input number to <LiquidInput/>
- Update the state in the handleInputChange() event handler.
- You can access the new value with "e.target.value"
- Ensure the value on the input field comes from state.
3) Ensure that changing one input updates the others with the correct conversion amount.
Hints:
- 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.
HINT:
- google "mdn toFixed"