I’m having some trouble pushing the values from my form
to an array that I’m mapping on screen.
const ForumTopic = [
{
title: "First Post",
messages: "test",
author: "Dagger",
count: 1,
date: "02/16",
},
];
const [topic, setTopic] = useState(ForumTopic);
Storing ForumTopic in state so I can add entries and display on screen after I click the submit button below.
const addTopic = (e) => {
e.preventDefault();
setTopic([...topic, e.target.value]);
};
<form onSubmit={addTopic}>
Create a topic title
<label htmlFor="title">
<input id="title"></input>
</label>
Write your message
<label htmlFor="message">
<textarea id="message"></textarea>
</label>
<label htmlFor="author">
<input id="author" defaultValue="Dagger" hidden></input>
</label>
<label htmlFor="count">
<input id="count" defaultValue="1" hidden></input>
</label>
<label htmlFor="date">
<input id="date" defaultValue="02/16/2023" hidden></input>
</label>
<button type="submit">
Post New Message
</button>
</form>
That’s my code and form. The code is meant to push the values from each label in the form to create a new object inside the topic
array. I want everything stored in a new object with the id
of each label to match the names of each object (title, author, date, etc) but for some reason all I’m getting are undefined errors.
2
Answers
The problem is that on your addTopic function:
e.target.value are always undefined
to access the data you have to do:
A simple way to do it is like this.
You need to obtain the value you are getting with an onChange in the input.
LINK to the example: https://stackblitz.com/edit/react-8r9f8l?file=src%2FApp.js