CODEWITHSUNDEEP
reactjsformsfunctionreact-hooksstate
Dev
Dev

Reputation: 385

setState doesn't work after submitting the form

I'm new to React JS and now I'm trying to learn hooks in function components. Here is my code:

App

import React, { useState } from "react";
import "./App.css";

import AddPlayerForm from "./components/AddPlayerForm";

const App = () => {
  const [player, setPlayer] = useState("");
  const handleAddPlayer = (player) => {
    setPlayer(player);
  };

  return (
    <div className="container">
      <h3>Player: {player}</h3>
      <AddPlayerForm addPlayer={handleAddPlayer} />
    </div>
  );
};

export default App;

Form:

import React, { useState } from "react";

const AddPlayerForm = (props) => {
  const [value, setValue] = useState("");

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(e.target.value);
    e.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input
          onChange={handleValueChange}
          value={value}
          className="form-control form-control-lg"
          type="text"
          placeholder="Add player"
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
};

export default AddPlayerForm;

So I'm trying to provide submitted value from the from to App component but for some reason nothing changes in <h3>Player: {player}</h3> after clicking submit. Could you please tell me where I made a mistake in my code?

Upvotes: 0

Views: 1607

Answers (4)

Ajay Thomas
Ajay Thomas

Reputation: 101

In the AddPlayerForm component, you're using the useState hook to store the value of the input in value every time the input changes. So, in the handleSubmit method, instead of passing e.target.value, you can pass value.

Also, if you want to reset the input after submitting, you can call setValue("").

import React, { useState } from "react";

const AddPlayerForm = (props) => {
  const [value, setValue] = useState("");

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(value);
    setValue(""); // To reset the input
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input
          onChange={handleValueChange}
          value={value}
          className="form-control form-control-lg"
          type="text"
          placeholder="Add player"
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
};

export default AddPlayerForm;

The React docs has a section on handling forms. https://reactjs.org/docs/forms.html

Also, this article on uncontrolled components might be helpful. https://reactjs.org/docs/uncontrolled-components.html

Upvotes: 2

Nadeem Haider
Nadeem Haider

Reputation: 170

You need to change your handleSubmit function to:

const handleSubmit = (e) => {
e.preventDefault();
props.addPlayer(value);
e.target.reset();

};

because the variable value contains the name of the player.

Upvotes: 1

Sarthak Aggarwal
Sarthak Aggarwal

Reputation: 2312

Try This. Pass the value present in your state to addPlayer

 const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(value);
    e.target.reset();
  };

Upvotes: 2

Dennis Vash
Dennis Vash

Reputation: 53964

You should submit the value of the state:

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.value); // undefined

  // value from useState
  props.addPlayer(value);
};

Also, e.target.reset() won't work because your input component is a controlled component (use of value={value}), therefore in order to reset you need to reset the state:

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.value); // undefined

  // value from useState
  props.addPlayer(value);

  // not e.target.reset()
  setValue('');
};

See Controlled vs Uncontrolled components

Edit Q-62979669-ResetTarget

Upvotes: 2

Related Questions