CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Mark D. Foti
Mark D. Foti

Reputation: 59

How to get input value upon button click

What I am trying to do is, upon clicking the Submit button, I want to grab the value that was typed into the input to then update the h1.

import React from "react";

function App() {
  const [headingText, setHeadingText] = React.useState("");

  function handleChange(event) {
    setHeadingText(event.target.value);
  }

  function handleSubmit(event) {
    alert(event.target);
  }

  return (
    <div className="container">
      <form onSubmit={handleSubmit}>
        <h1>Hello {headingText}</h1>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={headingText}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

With the above code, so far I am able to update the h1 after every single keystroke that is entered into the input. But instead of that, I want to only update the h1 with the input value when I press the Submit button.

Upvotes: 0

Views: 46

Answers (3)

litelite
litelite

Reputation: 2851

You could put the result of each keystroke in the state in another field that is not displayed anywhere and on click put the value from that new field into the heading. Like this :

import React from "react";

function App() {
  const [tempHeadingText, setTempHeadingText] = React.useState("");
  const [headingText, setHeadingText] = React.useState("");

  function handleChange(event) {
    setTempHeadingText(event.target.value);
  }

  function handleSubmit(event) {
    setHeadingText(tempHeadingText);
  }

  return (
    <div className="container">
      <form onSubmit={handleSubmit}>
        <h1>Hello {headingText}</h1>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={tempHeadingText}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Upvotes: 1

Samathingamajig
Samathingamajig

Reputation: 13245

You'll need to use 2 useState's, one to hold the value of the input box, the other to hold the value of the header.

// import React from "react"; // not On StackOverflow

function App() {
  const [headingTextBuffer, setHeadingTextBuffer] = React.useState("");
  const [headingText, setHeadingText] = React.useState("");

  function handleChange(event) {
    setHeadingTextBuffer(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
  
    setHeadingText(headingTextBuffer);
  }

  return (
    <div className="container">
      <form onSubmit={handleSubmit}>
        <h1>Hello {headingText}</h1>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={headingTextBuffer}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

// export default App; // not on StackOverflow

ReactDOM.render(<App />, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 1

cerwind
cerwind

Reputation: 122

One way you could do this is using an inputText state that is updated in your handleChange function.

Now when you submit in your submit function you can update the headingText state to be equal to the inputText which should update your h1 value.

Upvotes: 1

Related Questions