0
217
ViewsTrying to add strings from a Form into an array on submit but I'm left with an array of empty strings instead. Using Functional Components
Using functional components, I need to fill an array with string Form data onSubmit. handleSubmit is supposed to store the string data but when I use console.log(value) it returns an empty array.
I can't figure out how to access the user input from the Form so that it can be stored into an array. I thought that setValue([value]) would be a method to accomplish this but clearly something is not right with my code.
read2List is supposed take the data from value and store it into an array when the submit button is clicked. I appreciate any ideas! Thank you for your time!
function App () {
const [value, setValue] = useState("");
const [entrylist, setEntry] = useState([]);
const handleSubmit = (event) => {
event.preventDefault();
setValue([value])
console.log(value)
}
const read2List = () => {
const updatedList = [...entrylist];
updatedList.push(value);
setEntry(updatedList);
console.log(updatedList);
}
return (
<div>
<div> Insert Entry </div>
<form class="entryForm" onSubmit={handleSubmit} >
<label for="newEntryId">
<span>New Entry:</span>
<textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"}
/>
</label>
<button type="submit" onClick={read2List}>Submit</button>
</form>
</div>
)
}
1 answers
Answer question0
You can do it as below. I simplified your code. I removed read2List function, as you can do what you want with one function. I added comments in the code. Here is a working CodeSandbox as well.
import { useRef, useState } from "react";
export default function App() {
const textAreaRef = useRef();
const [entrylist, setEntry] = useState([]);
console.log(entrylist); // I added the console log here, to see changes
const handleSubmit = (event) => {
event.preventDefault();
const updatedList = [...entrylist];
updatedList.push(textAreaRef.current.value);
textAreaRef.current.value = ""; // clear the input after submit
setEntry(updatedList);
};
return (
<div>
<div> Insert Entry </div>
<form className="entryForm" onSubmit={handleSubmit}>
<label htmlFor="newEntryId">
<span>New Entry:</span>
<textarea
type="text"
id="newEntryId"
name="newEntryName"
rows="30"
cols="75"
defaultValue="What's on your mind?"
ref={textAreaRef}
/>
</label>
<button type="submit">Submit</button>
</form>
</div>
);
}
To know more about handling inputs in React, visit this page from the official documentation.