Search code examples
javascriptreactjsreactstrap

Reactstrap Form Input innerRef coming back null

Trying to send input data to console.log but it doesn't seem to be working correctly. I'd like to be able to log into console email and password from auth.

Here is my constructor and onChange:

  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      errors: {}
    };

    this.onChange = this.onChange.bind(this);
  }

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

Here is my onSubmit:

onSubmit = e => {
    e.preventDefault()

    const userData = {
      email: this.state.email,
      password: this.state.password
    };

    console.log(userData);
  }

Here is my Input from Form:

<Input
  name="email"
  type="email"
  onChange={this.onChange}
  innerRef={this.state.email}
  error={errors.email}
/>

Not getting any errors, just email and password are coming back as null. Here is the screenshot

Solution

  • You have to change the onChange function to this : 

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

    I think this have to solve your problem