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;

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

/* 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;

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

import "./App.css";
import TempratureCalculatorComponent from "./Components/TempratureCalculatorComponent";
const App = () => (
  <div className="App">
    <TempratureCalculatorComponent />
  </div>
);

export default App;

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.value as an argument into the onTempratureChange function. So If I typt input in to the input element as 1 then you are passing 1 not the event object 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");
  };