display user input value upon submit in react edited: https://drive.google.com/file/d/1vMGzPll7SpeRPpQ_h3gkR14ePrJzWij4/view?usp=sharing (my codes)

In this code i saw from other thread/post here in Stackoverflow, ''''''' {submittedText && (

You just typed: {submittedText}

These are all my codes attached above... How would I enter text in input field/text box for many times? and put alert related to the text inputted. ex: Cat, dog, snake

The output below should be Student's name: cat (space) STudent's name: dog etc

Thank you! Link here

CodePudding user response：

Your question is not clear ,maybe you are talking about execute code on field change So this might help

const Somename = () => {

const [formData, setFormData] = useState({
  username: ''
});  

  const handleFieldChange = e => {
  setFormData({
    ...formData,
    [e.target.name]: e.target.value
  });
};

return (
  <Form onSubmit={handleSubmit}>
    <Form.Group className="mb-3">
      {hasLabel && <Form.Label>Name</Form.Label>}
      <Form.Control
        placeholder={!hasLabel ? 'Name' : ''}
        value={formData.username}
        name="username"
        onChange={handleFieldChange}
        type="text"
      />
    </Form.Group>
 </Form>
  );
 };

CodePudding user response：

Your question is not clear.

If it means that you want to see the values entered in the past as well as the values entered now, you can use a string array.

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

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const [submittedText, setSubmittedText] = useState([]);

  const textChangeHandler = (i) => {
    setEnteredText(i.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    setSubmittedText([...submittedText, 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.map(el => <p>You just typed: {el}</p>)}
    </div>
  );
}