React: Setting useState() hook clears out input fields?

user_7508288 0
Viewed 279

Whenever I set a state in my React app, it clears out my inputs (check box, numbers). Here's a very barebones version that illustrates the issue.

import React, { useState } from "react";
export default function App() {
  const [dummy, setDummy] = useState(false);

  function handleMint() {
    setDummy((dummy) => !dummy);
  }

  const MintBTN = () => (
    <div>
      <div>
        <input className="form-control" type="number" max="20" min="1" />
        <div>
          <input type="checkbox" />
        </div>
      </div>

      <div>
        <button onClick={handleMint}>mint</button>
      </div>
    </div>
  );
  return <MintBTN />;
}

You can try it out yourself. Add numbers and click the check box and hit mint. Whamo-bamo, your inputs magically disappear.

https://codesandbox.io/s/friendly-buck-6g6oh?file=/src/App.js:0-499

I figure there's something I'm doing wrong that I just don't see yet. I need to be able to click the button or do an onChange event for the inputs without them clearing out. For some reason setting state is also making my page styles freak out. Not sure what's going on. Some of my key dependencies if those are helpful. Thanks.

"react": "^17.0.2",
"webpack": "^4.19.1"
reactjs javascript
2 Answers

Each time you set a state (setDummy), the component is rerendered and will reset you're inputs because they are uncontrolled. You need to make them controlled by using state hooks for those inputs.

import React, { useState } from "react";
export default function App() {
  const [dummy, setDummy] = useState(false);
  const [number, setNumber] = useState(0);
  const [checked, setChecked] = useState(false);

  function handleMint() {
    setDummy((dummy) => !dummy);
  }

  return (
    <div>
      <div>
        <input
          className="form-control"
          type="number"
          max="20"
          min="1"
          value={number}
          onChange={e => setNumber(e.target.value)}
        />
        <div>
          <input
            type="checkbox"
            checked={checked}
            onChange={e => setChecked(e.target.checked)}
          />
        </div>
      </div>

      <div>
        <button onClick={handleMint}>mint</button>
      </div>
    </div>
  );
}

Notice the value and checked properties. They are being set by the hook value on each render. Now, notice the onChange property. Each time you interact with the input it will update the hook value and rerender the component. By letting React manage the value and checked properties, it will save the values of the inputs in each hook.

Take a look at Controlled Components and State Hooks

Update

Removed MintBTN function as Nicholas Tower pointed out

user_92113870

You are creating the MintBTN component inside of your App component. This does not work. Every time App renders, you create a brand new type of component. It may have the same text as the previous one, but it's a new type, so react needs to unmount the old one, and mount a new one, which resets the values of stored in any dom elements, and resets any react state.

Instead, create the component once outside of app.

export default function App() {
  const [dummy, setDummy] = useState(false);

  function handleMint() {
    setDummy((dummy) => !dummy);
  }

  return <MintBTN onClick={handleMint} />;
}

const MintBTN = ({ onClick }) => {
  return (
    <div>
      <div>
        <input className="form-control" type="number" max="20" min="1" />
        <div>
          <input type="checkbox" />
        </div>
      </div>

      <div>
        <button onClick={handleMint}>mint</button>
      </div>
    </div>
  );
};
user_37948120
Related