TypeError: Cannot read property 'value' of undefined on components (ReactJS forms)

Question

This is not the duplicate of this, as i'm using controlled components and hence, it should have target.value . I'm getting this error following the example given here, I know that i am not binding onClick and onSubmit with 'this' , (the code works well on binding) but instead i have changed 'this.handleChange' to an arrow function '() => this.handleChange()' and similarly for handleSubmit. This should have worked as given here

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={() => this.handleChange()}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }


ReactDOM.render(<NameForm />, document.getElementById("root"));

it should be this.setState({value: event.target.value}) instead of this.setState({event.target.value}) — Anurag Awasthi
– Anurag Awasthi, Commented Nov 9, 2018 at 9:28
When asking other people for help, please take the time to ensure that the code you're showing doesn't have basic errors in it, such as the extra } after render, the issue @nrgwsth points out above, the ; after event.target.value in handleChange... All of which your browser or IDE would have told you about. It's also useful to create a runnable example demonstrating the problem using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Nov 9, 2018 at 9:36

Anurag Awasthi · Accepted Answer · 2018-11-09 09:34:12Z

2

You are not passing event to the event handler. Change onChange={() => this.handleChange()} to onChange={(e) => this.handleChange(e)}.

Also it should be this.setState({value: event.target.value}) instead of this.setState({event.target.value})

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange(event) {
    this.setState({
    value: event.target.value
    });
  }

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={(e) => this.handleChange(e)}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }

ReactDOM.render(<NameForm />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited Nov 9, 2018 at 9:34

answered Nov 9, 2018 at 9:31

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

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

1 Comment

T.J. Crowder Over a year ago

Threre are a couple of other basic typo-style errors in the code as well, but the fundamental issue is the second thing you mention: Not passing in event.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'value' of undefined on components (ReactJS forms)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related