I'm trying to have the data from the textarea in the form be stored in an array once the user hits the submit button. I'm working with only functional components. Do I need to use preventDefault() to stop the page from refreshing in order for the data to be transferred into an array? I need the form to still clear after the user hits submit so if I use preventDefault() I will likely need to create a new component to reset the textarea.
I appreciate any ideas! Thank you for your time!
function App () {
const [value, setValue] = useState("");
const [entrylist, setEntry] = useState([]);
const handleChange = () => {
setValue([value])
console.log(value)
}
const readNWrite = () => {
setEntry([entrylist])
entrylist.push(value)
}
return (
<div>
<div> Insert Entry </div>
<form class="entryForm" >
<label for="newEntryId">
<span>New Entry:</span>
<textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"} onChange={(e)=> {
handleChange(e.target.value);
}} />
</label>
<button onClick={readNWrite}>Submit</button>
</form>
</div>
)
}
You'll need to handle the onSubmit event on the form. And like you suspected, you'll need to call event.preventDefault() to prevent the form from reloading the page.
Extract the values from the form with the FormData constructor. Then loop over the formdata and add each entry to a new array.
Update the state with the new entries.
function App() {
const [entries, setEntries] = useState([]);
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const newEntries = [];
for (const [name, value] of formData) {
newEntries.push({
name,
value
});
}
setEntries(newEntries);
};
/**
* This is here to log the changed entrylist state.
*/
useEffect(() => {
console.log(entries);
}, [entries]);
return (
<div>
<div>Insert Entry</div>
<form
class="entryForm"
onSubmit={handleSubmit}
>
<label for="newEntryId">
<span>New Entry:</span>
<textarea
id="newEntryId"
name="newEntryName"
rows="30"
cols="75"
defaultValue={"What's on your mind?"}
/>
</label>
<button
type="submit"
onClick={readNWrite}
>Submit</button>
</form>
</div>
);
}
You do need e.preventDefault() to prevent form's default action from happening, and that should be added to your readNWrite event handler.
You don't need to create a new component to reset your textarea, because from what I can see from your code, you are storing the text into [entrylist]. While the change in textarea is handled by handleChange, where e.target.value is passed in, what you can do is after push the current text to the array, you can set the value to an empty string like this,
const handleChange = (e) => {
setValue(e.target.value);
console.log(value);
}
const readNWrite = () => {
setEntry([entrylist]);
entrylist.push(value);
setValue("");
}
Looks like you're trying to modify entrylist directly which isn't something you can do. Instead create a new array and push your value onto that, then set the value of entryList using this new value.
const readNWrite = () => {
const updatedList = [...entrylist];
updatedList.push(value);
setEntry(updatedList);
}