ReactJS event.target.value returns as undefined

Question

I've made a form in ReactJS with one text input and when it submits I want to get its value and put it into a variable. But when I console.log() it returns as undefined. How do I fix this? Here is my code.

class App extends Component {
    state = {
        todoTitle: ""
    };

    render() {
        return (
            <div>
                <center>
                    <form
                        onSubmit={(event) => {
                            event.preventDefault();
                            this.setState(todoTitle: event.target.value,);
                            console.log(this.state.todoTitle); // Returns "undefined"
                        }}
                    >
                        <input
                            type="text"
                            autocomplete="off"
                            class="form-control"
                            name="todoInput"
                            placeholder="Enter todo"
                            style={{ width: "400px", height: "50px" }}
                        />
                        <input
                            type="submit"
                            value="Submit"
                            id="submitButton"
                        ></input>
                    </form>
                </center>
        }
    }
}

The `setState` should be like `this.setState({todoTitle: event.target.value});` — Sajeeb Ahamed, Dec 15 '20 at 17:06
@ani: You need any other help reagarding ReactJS, Hooks, Asynchronous javascript , feel free to message or write an email at emmeiwhite@gmail.com. Happy coding. Do rate the answer if it was useful:) Thanks — Imran Rafiq Rather, Dec 16 '20 at 11:08

Ketan Ramteke · Answer 1 · 2020-12-15T17:20:30.803

You can modify your app a bit to get the value on onChange of input textfield, and then store it in the array in case of below example:

export default class App extends React.Component {
  state = {
    todoTitle: "",
    todoList: []
  };

  render() {
    return (
      <div>
        <center>
          <form
            onSubmit={event => {
              event.preventDefault();
              this.setState(
                {
                  todoList: [...this.state.todoList, this.state.todoTitle]
                },
                () => {
                  console.log(this.state.todoList);
                }
              );
            }}
          >
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              onChange={event => {
                this.setState({ todoTitle: event.target.value });
                console.log(event.target.value);
              }}
              style={{ width: "400px", height: "50px" }}
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  }
}

Full app here: Stackblitz

Imran Rafiq Rather · Accepted Answer · 2020-12-15T17:41:14.070

You need to either make a controlled input or useRef for un-controlled input for the React to keep track of your todoTitle state.

To make a controlled input, you will need to use onChange event and a value={this.state.todoTitle} property.

Also on your form, it is best to add an onSubmit event. There is however an option to set the submit on the form submit button also. In that case we need to use onClick={this.handleSubmit} as follows <input type="submit" value="Submit" id="submitButton" onClick={this.handleSubmit} />.

The below code will work for you:

class Form extends React.Component {
  state = {
    todoTitle: "",
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.todoTitle);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            autocomplete="off"
            class="form-control"
            name="todoInput"
            placeholder="Enter todo"
            style={{ width: "400px", height: "50px" }}
            value={this.state.todoTitle}
             onChange={(e) => this.setState({ todoTitle: e.target.value })}
          />
          <input type="submit" value="Submit" id="submitButton" />
        </form>
      </div>
    );
  }
}

Todd Skelton · Answer 3 · 2020-12-15T17:21:56.197

There are a few other errors with your code, but I will just answer your question.

setState triggers a re-render, so your state isn't available to log until the next time it runs. You can just log what you put in setState.

console.log(event.target.value);

This question has more info. setState doesn't update the state immediately

Also, you can do a callback.

this.setState({ todoTitle: event.target.value }, () =>
  console.log(this.state.todoTitle)
);

score 0 · Answer 4 · answered Dec 15 '20 at 17:27

Try this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todoTitle: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

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

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.todoTitle);
  }

  render() {
    return (
      <div>
        <center>
          <form onSubmit={this.handleSubmit}>
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              style={{ width: "400px", height: "50px" }}
              onChange={this.handleChange}
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  }
}

This will change the state on input changes and then logs on submit the state. An alternative would be to just get the input element and its value via getElementById or something similar in React.

Your code was also not very well formatted and a lot of closing tags missed.

Read more here: Get form data in ReactJS

ReactJS event.target.value returns as undefined

4 Answers4