CODEWITHSUNDEEP
reactjssetstate
Reghuram Karunamurthy
Reghuram Karunamurthy

Reputation: 23

React state sets the same value to all of the state values

I'm new to react JS, I'm trying to get the values from a form, and send it to a node JS middleware. I set up two values in the state, one for the email and another one for the password. I set the state for both values in the set state method.

      class LoginForm extends Component {
        
          constructor(props){
            super(props)
        
            this.state = {
              email : '',
              password : '',
            }
        
          }
         
          handleChange = (e) => {
        
            this.setState({ email : e.target.value, password : e.target.value})   
          }
        
        
          handleSubmit = (e) => {
            
            console.log('state', this.state)
            
          };


render () {
    return (
      <div style = {styles.form} >
      <Fragment>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.handleSubmit}
        >
              <Form.Item
                  name="email"
                  rules={[
                    {
                      type: 'email',
                      message: 'The input is not valid E-mail!',
                    },
                    {
                      required: true,
                      message: 'Please input your E-mail!',
                    },
                  ]}
                  hasFeedback
                >
                    <Input
                    placeholder={t`Email`}
                    value={this.state.email}
                    onChange={this.handleChange} />
                
                </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true }]} hasFeedback
          >
            <Input.Password 
                placeholder={t`Password`}
                value={this.state.password}
                onChange={this.handleChange}
            />
          </Form.Item>

          <Button 
                type="primary"
                htmlType="submit"
              >
                <span style = {styles.button} >Sign in</span>
          </Button>
        </Form>
        </Fragment>      
    </div>
    )
  }
}


    }

I created the handle submit function and linked it to the onsubmit method inside the form and tried console logging the current state of my values inside the handle submit function. To my surprise the value from the password gets console logged for the value email too. Like this

state {email: "123", password: "123"}

I cannot figure out what am I doing wrong.

Upvotes: 1

Views: 1416

Answers (2)

Rashed Rahat
Rashed Rahat

Reputation: 2475

Here is the solution:

handleChange = (e) => {
    let email = ''
    let password = ''

    if (e.target.name === 'email') {
        email = e.taget.value
    } else {
        password = e.taget.value
    }
    
    this.setState({ email, password})   
}

Upvotes: 0

Shashank
Shashank

Reputation: 324

I think if you change your handleChange function to this, it should work.

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

And add id to the input fields like this

<Input id="email" placeholder={t`Email`} value={this.state.email} onChange {this.handleChange} />

<Input.Password id="password" placeholder={t`Password`} value {this.state.password} onChange={this.handleChange} />

Upvotes: 1

Related Questions