User/dominic/telemetry-teaser #333
Conversation
…ces into user/dominic/telemetry-teaser
| const [battery, setBattery] = useState(NaN); | ||
| const [speed, setSpeed] = useState(NaN); | ||
| const [weather, setWeather] = useState(50); |
There was a problem hiding this comment.
Please use explicit type definitions
| const [speed, setSpeed] = useState(NaN); | ||
| const [weather, setWeather] = useState(50); | ||
|
|
||
| const [range, setRange] = useState(NaN); |
There was a problem hiding this comment.
Do we need to create a separate state variable for range here? Can't we just calculate range from battery speed and weather state variables? Remember, when you update any state variable, it will cause your component (App.tsx) to re-render(unless you use useMemo/useCallback hooks, will get to this in a future lesson hopefully), and update all variables.
| <SpeedInput /> | ||
| <BatteryInput /> | ||
| <SpeedInput speed={speed} setSpeed={setSpeed} /> | ||
| {isNaN(speed) && <p className="text-red-500">Speed is Required</p>} |
There was a problem hiding this comment.
When the app first loads, this message shouldn't be showing
| )} | ||
| <BatteryInput battery={battery} setBattery={setBattery} /> | ||
| {isNaN(battery) && ( | ||
| <p className="text-red-500">Battery is Required</p> |
There was a problem hiding this comment.
When the app first loads, this message shouldn't be showing
| @@ -1,4 +1,9 @@ | |||
| const BatteryInput = () => { | |||
| interface props { | |||
| @@ -1,4 +1,9 @@ | |||
| const SpeedInput = () => { | |||
| interface props { | |||
| @@ -1,4 +1,9 @@ | |||
| const WeatherInput = () => { | |||
| interface props { | |||
| @@ -8,7 +13,7 @@ const WeatherInput = () => { | |||
| type="range" | |||
| min="0" | |||
| max="100" | |||
| value="50" | |||
There was a problem hiding this comment.
You should be using controlled inputs here, let's say we have add some function in App.tsx that runs setWeather(12), would the slider be updated to reflect the change?
| Calculate! | ||
| </button> | ||
| {!isNaN(range) && ( | ||
| <p text-white>The predicted range of the Eylsia is {range} km</p> |
There was a problem hiding this comment.
Fix your output to 3 decimal places
Please have mercy