Uncaught TypeError: Cannot read properties of undefined (reading 'length') while setting the state

Question

Uncaught TypeError: Cannot read properties of undefined (reading 'length') 
Error is showing in react-dom-development.js file
[1]: https://i.sstatic.net/6a8tF.png
[2]: https://i.sstatic.net/Cn3EP.png

I am getting the above error whenever I am calling the method email handler of parent component from child component in order to set the state

Parent component:

const loginStates = (
    function states() {
        return {
            email: '',
            password: ''
        }
    }
)
    const LoginContainer = () => {
    const [state, setState] = useState(loginStates);

    const onChangeEmailHandler = (event) => {
        setState(prevState => {
            return { ...prevState, email: event.target.value }
        });
    }

    return (
        <div>
            <LoginComponent
                onChangeEmailHandler={onChangeEmailHandler}
            />
        </div>
    )
}

Child component:

const LoginComponent = props => {
    const classes = styles();
    const { onChangeEmailHandler } = props;
    const [isSignUpPage, setIsSignUpPage] = useState(false);

    return (
        <React.Fragment>
            <TextField 
              type='text' name='email' id='email' value={state.email}
              onChange={(event) =>onChangeEmailHandler(event)}
            />
        </React.Fragment>
    )
}

YLR · Accepted Answer · 2021-09-17 04:20:55Z

1

I have found the cause for this error, it was coming because :

<React.StrictMode>

tag was missing from index.js file, as soon as I wrap the Component with
<React.StrictMode> It started working.

//In index.js file
ReactDOM.render(
<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</Provider>,
document.getElementById('root')
);

edited Sep 17, 2021 at 4:20

YLR

1,5404 gold badges22 silver badges32 bronze badges

answered Sep 16, 2021 at 11:22

Learner

412 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TR3 · Accepted Answer · 2021-09-15 15:38:26Z

0

Don't pass in a function as your state, pass in the object...

const initialLoginState = {
            email: '',
            password: ''
        }
    
    const LoginContainer = () => {
    const [state, setState] = useState(initialLoginState);

answered Sep 15, 2021 at 15:38

TR3

3874 silver badges7 bronze badges

1 Comment

Learner Over a year ago

I tried it but got the same error, I am not sure what is wrong here.

Mohamed abdelmagid · Accepted Answer · 2021-09-15 15:55:48Z

0

I couldn't reproduce your error, however I made few changes to your code to make it work, it turns out that in order to pass a function in useState hook you need to pass a higher order function that returns the function you want, you can check full explanation here.

Parent Component:

import LoginComponent from "./child";
import React, { useState } from "react";

const loginState = function states() {
  return {
    email: "",
    password: ""
  };
};

const LoginContainer = () => {
  const [state, setState] = useState(() => loginState);

  const onChangeEmailHandler = (email) => {
    const cur = state();
    setState(() => () => ({ ...cur, email }));
  };

  return (
    <div>
      <LoginComponent
        onChangeEmailHandler={onChangeEmailHandler}
        email={state().email} // You need to pass the email here to display it on rerender.
      />
    </div>
  );
};

export default LoginContainer;

Child Component:

import React from "react";

const LoginComponent = (props) => {
  // const classes = styles();
  const { onChangeEmailHandler } = props;
  // const [isSignUpPage, setIsSignUpPage] = useState(false);

  return (
    <React.Fragment>
      <input
        type="text"
        name="email"
        id="email"
        value={props.email} // recieve the email from the props passed from parent.
        onChange={(event) => onChangeEmailHandler(event.target.value)}
      />
    </React.Fragment>
  );
};

export default LoginComponent;

You can check my sand box here

answered Sep 15, 2021 at 15:55

Mohamed abdelmagid

3795 silver badges21 bronze badges

2 Comments

Learner Over a year ago

It's showing that "TypeError: state is not a function" at const cur = state(); I tried with const cur= state; but it lead me to the same error, Just surprised how it is working in the code sandbox

Mohamed abdelmagid Over a year ago

That error used to appear at first in the sand box until I passed a higher order function instead of the function directly. Anyway you already got it to work, congrats.

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read properties of undefined (reading 'length') while setting the state

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related