Can't enter text value in input field with ReactJS

Question

I am currently trying to change the value of a input field using ReactJS but I'm having some issues. I am unable to enter values inside the input field.

I have read in a couple of other questions that I just need to change the value of the input field to the state element but I guess that I'm still doing something wrong.

I have removed the handleLogin function to save more space, I just decided that it's irrelevant since it's already working.

Parent Component:

 class LoginPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isInvalidForm: null,
       isFirstLogin: false,
       user: null,
       email: '',
       password: '',
       newPassword: '',
       userAttr: null
     }
     this.handleLogin = this.handleLogin.bind(this);
     this.changePassword = this.changePassword.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
    changePassword = (event) => {
     event.preventDefault();
     const cognitoUser = this.state.user;
     const userAttr = this.state.userAttr;
     const newPassword = this.state.newPassword;
     cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
     onSuccess: (result) => {
     console.log("NEW PASSWORD COMPLETED: ");
     console.log(result);
    },
    onFailure: (err) => {
     console.log(err);
    }
  });
}

handleChange = event => {
 event.preventDefault();
 const { name, value } = event.target;
 this.setState({ [name]: value });
};



     render() {
    return (
      <div>
        {this.state.isFirstLogin ? (
          <NewPassswordForm changePassword={this.changePassword} handleChange={this.handleChange} newPassword={this.state.newPassword} />
        ) : (
            <LoginForm handleLogin={this.handleLogin} handleChange={this.handleChange} email={this.state.email} password={this.state.password} />
          )}
      </div>
    );
  }

}

I am having this issue only in my NewPasswordForm component:

class NewPasswordForm extends Component {
    render() {
        return (
            <div>
                <h3> Confirm new Password</h3>
                <form onSubmit={this.props.changePassword}>
                    <div className="form-group">
                        <label htmlFor="exampleInputPassword2">Password</label>
                        <input
                            type="password"
                            name="password2"
                            value={this.props.newPassword}
                            onChange={this.props.handleChange}
                            className="form-control"
                            id="exampleInputPassword2"
                            placeholder="New Password"
                        />
                    </div>
                    <button type="submit" className="btn btn-primary">
                        Submit
                    </button>
                </form>
            </div>
        )
    }
}


export default NewPasswordForm;

marzelin · Accepted Answer · 2019-10-23 13:41:24Z

1

name and value don't match. Change name="password2" to name="newPassword"

answered Oct 23, 2019 at 13:41

marzelin

11.7k5 gold badges38 silver badges50 bronze badges

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

1 Comment

someonewithakeyboardz1 Over a year ago

I am blind but now I can see. I've been staring at the screen for 3 hours trying to find my error. Thank you and sorry for the silly question.

akhtarvahid · Accepted Answer · 2019-10-23 13:58:57Z

class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isInvalidForm: null,
      isFirstLogin: false,
      user: null,
      email: '',
      password: '',
      newPassword: '',
      userAttr: null
    }

  }
   changePassword = (event) => {
    event.preventDefault();
    const cognitoUser = this.state.user;
    const userAttr = this.state.userAttr;
    const newPassword = this.state.newPassword;
    cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
    onSuccess: (result) => {
    console.log("NEW PASSWORD COMPLETED: ");
    console.log(result);
   },
   onFailure: (err) => {
    console.log(err);
   }
 });
}

handleChange = evt => {
const value = evt.target.value;
  this.setState({
    [evt.target.name]: value
  });
};



    render() {
   return (
     <div>

         <NewPasswordForm 
         changePassword={this.changePassword}
          handleChange={this.handleChange} 
         newPassword={this.state.newPassword}
         password={this.state.password} />

     </div>
   );
 }

}

after changes

class NewPasswordForm extends React.Component {
  render() {
      return (
          <div>
              <h3> Confirm new Password</h3>
              <form onSubmit={this.props.changePassword}>
                  <div className="form-group">
                      <label htmlFor="exampleInputPassword2">Password</label>
                      <input
                          type="password" 
                          name="password"
                          value={this.props.password}
                          onChange={this.props.handleChange}
                          className="form-control"
                          id="exampleInputPassword1"
                          placeholder="Password"
                      />
                      <input
                          type="password" 
                          name="newPassword"
                          value={this.props.newPassword}
                          onChange={this.props.handleChange}
                          className="form-control"
                          id="exampleInputPassword2"
                          placeholder="New Password"
                      />
                  </div>
                  <button type="submit" className="btn btn-primary">
                      Submit
                  </button>
              </form>
          </div>
      )
  }
}

Collectives™ on Stack Overflow

Can't enter text value in input field with ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related