I have this simple form in my App form. I learned that a button with type="reset" clears the inputs, but it isn't working here with React. Am I missing something?

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
}

I have this simple form in my App form. I learned that a button with type="reset" clears the inputs, but it isn't working here with React. Am I missing something?

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
}

• javascript
• html
• reactjs

• 1 You have controlled input. Reset won't work. Either use uncontrolled input or use setState('') to reset the value – Konrad Commented Oct 1, 2022 at 10:24
• IMO, use an object to maintain the initial state of the form and on RESET, update the state using initial object. – Rayon Commented Oct 1, 2022 at 10:29

4 Answers 4

You must reset the state name with an empty string when the reset button is clicked.

export default function App() {
  const [name, setName] = useState("");

  const onClickReset = () => setName('');
  
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={onClickReset}>Reset</button>
    </form>
  );
}

Use an object to maintain the initial state of the form and on RESET, update the state using the initial object.

Also, use event.preventDefault() to prevent the default action of the reset button.

const {useState} = React;


 function App() {
   const initState = {
     name:''
   };
  const [name, setName] = useState(initState.name);
  const onReset = (e)=>{
    e.preventDefault();
    setName(initState.name);
  }
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={e=>onReset(e)}>Reset</button>
    </form>
  );
}
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
)

<div id="root"></div>
<script src="https://cdnjs.cloudflare./ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={() => setName('')}>Reset</button>
    </form>
  );
}

The reason for this is that your input is now controlled by a state, if you want to clear the form by type='reset' try removing the value and onChange attributes in your input. but if you want to clear the state you can create a function that will handle this. here's a sample function for your reference.

function handleClear() {
   setName('')
}

<button type="button" onClick={handleClear}>Reset</button>