Can some help I am not understanding why i am getting this error.Is because that the data being passed is not visible or it has to do with how i handled change event

class Signup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            step:1,
            email:'',
            password:'',
          
        };
    }
  
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    };
    render() 
        const { email, password,} = this.state;
        const values = { email, password, }

       switch (step) {
           case 1:
           return(
               <UserDetails  handleChange={this.handleChange()} values={values}/>

               )
           case 2:
               return (
                   <Verification  />

               )
           default:


       }
    }
}

export default Signup;


function UserDetails({handleChange,values}) {
   
    return (
        <section >
            <div >
                <div>
                    <form action="">                     
                        <div>
                            <label 
                            <input
                              value={values.email} onChange={handleChange('email')} />
                        </div>
                        <div >
                           
                            <input
                               value={values.password} onChange={handleChange('password')} />
                        </div>                        
                        <button onClick={Continue}>Sign Up</button>
                    </form>
                </div>
            </div>
        </section>
    );
}

export default UserDetails;

Can anyone please help to understand cause i don't understand what is causing the error yet i have handled change correctly

CodePudding user response：

When the interpreter is gonna parse the code it is gonna run the function immediately since you are calling the function rather than passing a reference to the function

<input value={values.password} onChange={handleChange('password')} />

Change your code to this,

<input value={values.password} onChange={(e) => handleChange('password', e)} />

or

<input value={values.password} onChange={handleChange.bind('password', e)} />

And change your function from,

handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    };

to this,

handleChange = (input, e) => {
        this.setState((prev) => ({ ...prev, [input]: e.target.value }));
    };

CodePudding user response：

In UserDetails, you're calling handleChange('password') on every change event without taking the event. You're just calling with the string 'password'. To fix this, you need a couple of changes.

First, in UserDetails.js

   <input value={values.password} onChange={(e) => handleChange('password', e)} />

Second, in Signup.js you need to append to the current state

    handleChange = (input, e) => {
        this.setState((prev) => ({ ...prev, [input]: e.target.value }));
    };

See React docs for more information

CodePudding user response：

handleChange is a partial function and you are evaluating it with empty input before passing it to UserDetails

Change

<UserDetails  handleChange={this.handleChange()} values={values}/>

to

<UserDetails  handleChange={this.handleChange} values={values}/>

and it should work just fine