display user input value upon submit
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!
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>
);
}
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>
);
};
