score:3

Accepted answer

create some progress state and use the form's onsubmit callback to update state and clear the input value. render the progress state into the h4 tag.

function app() {
  const [progress, setprogress] = usestate(43); // <-- progress state

  return (
    <div>
      <div classname="top-menu">
        <div>
          <h1>progress</h1>
        </div>
      </div>

      <div classname="progress-container">
        <h4>progress: {progress} %</h4> // <-- render progress state
        <div classname="progress-bar"></div>
      </div>

      <div classname="inputs">
        <label>progress (in %)</label>
        <div classname="input">
          <form onsubmit={e => { // <-- form submit callback
            e.preventdefault(); // prevent default form action so page doesn't reload
            const { value } = e.target.progress;
            setprogress(value); // update state
            e.target.progress.value = ''; // reset input value
          }}>
            <input id="progress" type="text" placeholder="e.g. 75"></input>
            <button type="submit" classname="button">update</button> // <-- type = submit
          </form>
        </div>
      </div>
    </div>
  );
}

edit react-get-value-of-inputtype-text-and-output-the-value


Related Query

More Query from same tag