I have to know why always Error code turned off in console-CodePudding

It is actually working in my purpose for example like it has to be show my Minutes in screen. However when I executed the code console show up always error. I really want to know why they showed me Error and really want to fix it.

So my code is basically like this:

<!DOCTYPE html> 
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function App() {
      const [minutes, setMinutes] = React.useState();
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      return (
        <div>
          <h1 className="hi">Super Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
          />
          <h4>You want to convert {minutes}</h4>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

and always Error code like

react-dom.development.js:61 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at div
    at App (<anonymous>:10:31)

I'd like to know why it happened to me and what I have to do for figuring out.

CodePudding user response：

There is something that is rendering on your app when it is undefined for a while and it receives the data it becomes defined which is an uncontrolled behavior. Try to check which state is doing like that. In your code give a default value to your minute state.

CodePudding user response：

You have to initialize the useState hook to something like 0,

const [minutes, setMinutes] = React.useState(0);