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, Nov 09 '18 at 09: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](http://meta.stackoverflow.com/questions/338537/). — T.J. Crowder, Nov 09 '18 at 09:36

Anurag Awasthi · Accepted Answer · 2018-11-09T09:34:12.410

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>

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`. — T.J. Crowder, Nov 09 '18 at 09:33

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

1 Answers1