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

user_14313623 0
Viewed 935

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}
      />
material-ui react-native reactjs javascript
1 Answers

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

  1. in handleChange
  2. in handleNext, or
  3. 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.

user_84175260
Related