Display user input value upon submit in react

Question

I want the user to input some text, click submit and the text will be displayed below. I was able to get the input text as a whole, and print it in console. But I don't know how to display the text.

Here's my code: https://codesandbox.io/s/ecstatic-curie-ej6og?file=/src/App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const textChangeHandler = (i) => {
    setEnteredText(i.target.value);
    //console.log(i.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    const x = enteredText;
    console.log(x);
    setEnteredText("");
  };

  return (
    <div className="App">
      <h1>Get user input</h1>
      <form onSubmit={submitHandler}>
      <input
        placeholder="type something"
        type="text"
        value={enteredText}
        onChange={textChangeHandler}
      />
      <button type="submit" >
        Submit
      </button>
      </form>

      <p>You just typed: {x}</p>  // This is wrong. x is out of scope. But i'm not sure how to write this line. 
    </div>
  );
}

Houssam · Accepted Answer · 2021-10-24 15:32:53Z

2

You can use an additional state variable to store the "submitted text". You would update that new state variable with the text from the enteredText state variable before emptying it. You could also make sure the "submitted text" has a value before displaying it.

I am including code that does what I described, but you can also try implementing it on your own before looking at it:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const [submittedText, setSubmittedText] = useState(null);
  const textChangeHandler = (i) => {
    setEnteredText(i.target.value);
    //console.log(i.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    setSubmittedText(enteredText);
    setEnteredText("");
  };

  return (
    <div className="App">
      <h1>Get user input</h1>
      <form onSubmit={submitHandler}>
      <input
        placeholder="type something"
        type="text"
        value={enteredText}
        onChange={textChangeHandler}
      />
      <button type="submit" >
        Submit
      </button>
      </form>

      {submittedText && (<p>You just typed: {submittedText}</p>)}
    </div>
  );
}

edited Oct 24, 2021 at 15:32

answered Oct 24, 2021 at 15:18

Houssam

1,8751 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

somniumm Over a year ago

thanks for the hint!!! i got it sorted it out before looking at your answer.

somniumm Over a year ago

one addition question: what does {submittedText && (...)} mean? i just wrote <p>You just typed: {submittedText}</p>

RanAB Over a year ago

If submitted text has any value, submittedText will return true, in other words - render this part - (<p>You just typed: {submittedText}</p>)} If submittedText has any value

Houssam Over a year ago

It's meant to check that the submittedText is not null or undefined before displaying it, but since the initial value is "", then it becomes useless. I have updated my answer by initializing the submittedText to null so that it makes sense. You can learn more about "Inline If with Logical && Operator" on the documentation.

Collectives™ on Stack Overflow

Display user input value upon submit in react

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related