TypeError: Cannot read property 'value' of undefined in REACTJS

Question

I am getting this error on handleChange. I want to know what would be the issue??

 const [testState, setTestState] = useState({
    activeStep:0,
    firstName: '',
    lastName: '',
    email: '',
    occupation: '',
    city: '',
    bio: ''
  });

const { activeStep } = testState;
  const { firstName, lastName, email, occupation, city, bio } = testState;
  const values = { firstName, lastName, email, occupation, city, bio }

 const handleChange = (e) => {
      const value = e.target.value;
      setTestState({
        ...testState,
        [e.target.name]: value
      });
      
     
    };

  const handleNext = () => {
    debugger
    const { activeStep } = testState;
    setTestState({activeStep:activeStep+1});
  };

  const handleBack = () => {

    debugger
    const { activeStep } = testState;
    setTestState({activeStep:activeStep-1});
  };

I am using this in material ui Stepper, like this. I want to textfield data to be there when i click next or back button. I hope you are familiar with Material Ui Stepper, it will be real help.

function getStepContent(step) {
    switch (step) {
      case 0:
        return (
          <TransportationDetail 
          handleNext={handleNext}
            propsTransportation={propsParent.propsRateDetailsData}
            exhandleChange={(e) => exhandleChange(e)}
            values={values}
          />
        );
      case 1:
        return (
          <Testing 1
          handleNext={handleNext}
          handleBack={handleBack}
          exhandleChange={(e) => exhandleChange(e)}
          values={values}
          />
        );

      case 2:
       return (
          <Testing 2
          handleNext={handleNext}
          handleBack={handleBack}
          exhandleChange={(e) => exhandleChange(e)}
          values={values}
          />
        );
        
    
      default:
        return "No data available";
    }
  }

Now passing as props to <Testing 1 /> Component like this:

 const { values, exhandleChange } = props;

and to the textfield

     <TextField

        fullWidthid="outlined-size-normal"
        variant="outlined"
        name="firstName"
        onChange={exhandleChange()}
        value={values.firstName}
      />


     <TextField

        fullWidthid="outlined-size-normal"
        variant="outlined"
        name="lastName"
        onChange={exhandleChange()}
        value={values.lastName}
      />

If you add some code related to where handleChange is called maybe someone could help you — Fdr
– Fdr, Commented Sep 23, 2020 at 6:25
Look's like e.target is undefined. Are you passing an id perhaps instead of the event itself? e.target only exists if e is the original ChangeEvent. — user5734311
– user5734311, Commented Sep 23, 2020 at 6:29
What does console.log(e.target) prints if you place it in handleChange body? — vahdet
– vahdet, Commented Sep 23, 2020 at 6:30
I think Jarek's answer is the solution. If you change onChange={exhandleChange()} to onChange={exhandleChange} you will get the event on handleChange — Fdr
– Fdr, Commented Sep 23, 2020 at 8:44

Piyush Priyadarshi · Accepted Answer · 2020-10-04 08:31:53Z

There are 3 vulnerable places where the testState might get corrupted.

in handleChange
in handleNext, or
in handleBack

Looking at the code snippet, I believe you just want to update the value of activeStep in testState by incrementing or decrementing the value by 1 in handleNext and handleBack. And for handleChange, you want to go to the selected index.

Here we need to appreciate the beauty of spread operator coz that is only going to solve our problem. For handleNext and handleBack you may follow this code snippet,

const handleBack = () => {
      const { activeStep } = testState;

      const tempState = {...testState}
      tempState.activeStep = activeStep - 1
      setTestState(tempState);
    };


const handleNext = () => {
      const { activeStep } = testState;

      const tempState = {...testState}
      tempState.activeStep = activeStep + 1
      setTestState(tempState);
    };


const handleChange = (e) => {
      const tempState = {...testState}
      tempState.activeStep = e
      setTestState(tempState);
    };

And pass the selectedIndex of the component to handleChange while calling the function.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'value' of undefined in REACTJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related