Cannot type into input field in React

Question

I am struggling with my input field & haven't been able to find a working solution. I somehow cannot type anything into them. Any suggestions on how I could solve it?

Is there anything wrong with my onChange() that I am overseeing? I don't get any errors though. That's why it is so weird.

export default class SignIn extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      id: '',
    };
  }

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

  signup = (e) => {
    e.preventDefault();

    this.setState({
      id: uuid()
    }, () => {
      axios.post('https://api.xyz.co/api/signup?id=' + this.state.id + '&email=' + this.state.email + '&name=' + this.state.name)
      .then((result) => {
        console.log("submitted mail to join community");
        console.log('hi' + this.state.name)
        this.jump();
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

jump() {
        this.props.history.push({
          pathname: `/sceneries/8`,
          state: {
            name: this.state.name
          },
        })
  }

  render() {

    return (
      <div id="signIn">
        <form action="" method="post" className="form" >
            <input type="text" placeholder="Your first name" value={this.state.name} onChange={this.handleChange}/>
            <input
              type="email"
              value={this.state.email}
              onChange={this.handleChange}
              placeholder="Your email"
            />
            <button id="submitEmail" type="submit" onClick={this.signup}>
              Join us
            </button>
          </form>
</div>
  );
  }
}

Thanks a lot in advance!

You're missing "name" attributes from your inputs. In your handleChange function you're destructuring const { name, value } = e.target, but you don't set the name attribute on your inputs. — JMadelaine
– JMadelaine, Commented Feb 25, 2020 at 2:47
You need to add a name attribute to each of your <input> elements. ie: <input name="email" type="email" value=.....> — Bryan Elliott
– Bryan Elliott, Commented Feb 25, 2020 at 2:48
Although on SO we don't mind helping, you would have found the error easily if you'd have put a console.log in your handleChange function and logged name and value. The best thing to do when something doesn't work is follow the flow of data and log things along the way to make sure the data is what you expect it to be. If everything looks as expected and it still doesn't work, then that's the time to post a question on SO. — JMadelaine
– JMadelaine, Commented Feb 25, 2020 at 2:54
[e.target.name]: e.target.value in handlechange in the set state after adding the names. — Arundeep Chohan
– Arundeep Chohan, Commented Feb 25, 2020 at 3:06

Bryan Elliott · Accepted Answer · 2020-02-25 02:57:52Z

1

You are simply missing the name attributes on your <input> elements:

Your render method should look like this:

render() {
    return (
      <div id="signIn">
        <form action="" method="post" className="form" >
          <input
            name="name"  //name attribute here
            type="text"
            placeholder="Your first name"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <input
            name="email" //name attribute here
            type="email"
            value={this.state.email}
            onChange={this.handleChange}
            placeholder="Your email"
          />
          <button id="submitEmail" type="submit" onClick={this.signup}>
            Join us
          </button>
        </form>
      </div>
    );
 }

answered Feb 25, 2020 at 2:57

Bryan Elliott

4,0852 gold badges24 silver badges24 bronze badges

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

Comments

SuccessFollower · Accepted Answer · 2020-02-25 03:36:58Z

0

You have to add name property to your input.

e.target.name is not available in your code.

answered Feb 25, 2020 at 3:36

SuccessFollower

2204 silver badges14 bronze badges

Collectives™ on Stack Overflow

Cannot type into input field in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related