Hi I am trying to learn react and using the react guide from the react website in there is an example to called lifting the state up. The example is in class components I am trying to use functional components. The link to orginal example [website link][1]
I am getting cannot read properties of undefied in react. Not sure what to look for
import React, { useState } from 'react';
import TempratureInputComponent from './TempratureInputComponent';
const TempratureCalculatorComponent = () => {
const [waterTemprature, setwaterTemprature] = useState('');
const [tempratureScale, settempratureScale] = useState('c');
const handleCelsiusChange = (e) => {
console.log(typeof e.target.value);
const temp = Number(e.target.value);
// console.log(waterTemprature);
setwaterTemprature(temp);
settempratureScale('c');
};
const handleFahrenheitChange = (e) => {
// console.log(waterTemprature);
setwaterTemprature(e.target.value);
settempratureScale('f');
};
const toCelsius = (fahrenheit) => {
return ((fahrenheit - 32) * 5) / 9;
};
const toFahrenheit = (celsius) => {
return (celsius * 9) / 5 + 32;
};
const tryConvert = (waterTemprature, convertTo) => {
const input = parseFloat(waterTemprature);
if (Number.isNaN(input)) {
return '';
}
const output = convertTo(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
};
const celsius =
tempratureScale === 'f'
? tryConvert(waterTemprature, toFahrenheit)
: waterTemprature;
const fahrenheit =
tempratureScale === 'c'
? tryConvert(waterTemprature, toCelsius)
: waterTemprature;
return (
<>
<TempratureInputComponent
tempratureScale='c'
waterTemprature={celsius}
onTempratureChange={handleCelsiusChange}
/>
<TempratureInputComponent
tempratureScale='f'
waterTemprature={fahrenheit}
onTempratureChange={handleFahrenheitChange}
/>
</>
);
};
export default TempratureCalculatorComponent;/* eslint-disable comma-dangle */
/* eslint-disable react/prop-types */
import React from 'react';
const TempratureInputComponent = ({
tempratureScale,
waterTemprature,
onTempratureChange,
}) => {
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit',
};
const handleTempratureChange = (e) => {
console.log(e.target.value);
onTempratureChange(e.target.value);
};
return (
<div>
<fieldset>
<legend>Enter temperature in {scaleNames[tempratureScale]}</legend>
<input value={waterTemprature} onChange={handleTempratureChange} />
</fieldset>
</div>
);
};
export default TempratureInputComponent;import "./App.css";
import TempratureCalculatorComponent from "./Components/TempratureCalculatorComponent";
const App = () => (
<div className="App">
<TempratureCalculatorComponent />
</div>
);
export default App;
>Solution :
You are passing the value to onTempratureChange not the e object
const handleTempratureChange = (e) => {
console.log(e.target.value);
onTempratureChange(e.target.value);
};
As you can see in the above snippet you are passing value i.e
e.target.valueas an argument into theonTempratureChange
function. So If I typt input in to theinputelement as1then you are passing1not theeventobject itself
So there are 2 method to solve this
1) Either send the value as argument
const handleTempratureChange = (e) => {
console.log(e.target.value);
onTempratureChange(e.target.value);
};
Live Demo
and receive the value as parameter. So you should get the value in the onTempratureChange
const handleCelsiusChange = (value) => {
console.log(typeof value);
const temp = Number(value);
// console.log(waterTemprature);
setwaterTemprature(temp);
settempratureScale("c");
};
2) or you can send event object to onTempratureChange as:
const handleTempratureChange = (e) => {
onTempratureChange(e);
};
Live Demo
and get the e object as a parameter in onTempratureChange function as:
const handleCelsiusChange = (e) => {
const temp = Number(e.target.value);
setwaterTemprature(temp);
settempratureScale("c");
};