adding value inside an input - React

Question

I have a problem with adding value inside an input in my React component. I would like to put my generated password inside an input as a value. At the moment password is undefined.

App.js - main React component

class App extends React.Component {
  state = {
    passwordValue: "start",
    rangeValue: 6
  };

  generatePassword = event => {
    event.preventDefault();
    var length = 8,
      charset =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
      retPass = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
      retPass += charset.charAt(Math.floor(Math.random() * n));
    }

    console.log(retPass);
    this.setState({ passwordValue: retPass });
    return retPass;
  };

  render() {
    return (
      <div className={styles.container}>
        <Header name="lock" />
        <Generator
          submitFn={this.generatePassword}
          password={this.state.passwordValue} //props necessary for an input
        />
        <Footer />
      </div>
    );
  }
}

Generator.js - React component used in App.js

const Generator = ({ submitFn, props }) => {
  return (
    <form className={styles.generatContainer}>
      //some form inputs
      <button className={styles.generatContainer__button} onClick={submitFn}>
        Generate Password
      </button>
      <div className={styles.generatContainer__input}>
        <label name="newPass">Your New Password:</label>
        <input type="text" value={props.password}></input> //here is a problem
      </div>
    </form>
  );
};

export default Generator;

Taki · Accepted Answer · 2020-02-12 16:32:15Z

2

You're not destructuring the password :

const Generator = ({ submitFn, password }) => {
  // ...
  <input type="text" value={password}></input> //here is a problem
}

OR :

const Generator = ({ submitFn, ...props }) => {
  // ...
  <input type="text" value={props.password}></input> //here is a problem
}

answered Feb 12, 2020 at 16:32

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

adding value inside an input - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related