The user is supposed to input some text in a box and be sent from the front end (react js) to mongodb passing by nodejs. All this is working just fine but the problem is that what is being sent is just null instead of the actual text. So I went ahead and consoled.log JSON.stringify and surprisingly it was returning {}.
Please let me know if im missing anything.
pingbutton.js file:
const Pingbutton = () => {
const [form, setForm] = useState({
message: "",
});
const navigate = useNavigate();
function updateForm(value) {
return setForm((prev) => {
return { ...prev, ...value };
});
}
async function onSubmit(e) {
console.log("This is e: " + e);
console.log("This is form: " + form);
e.preventDefault();
const newMessage = { ...form };
console.log("3: " + newMessage);
console.log("5: " + JSON.stringify(newMessage));
await fetch("http://localhost:5000/record/add", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newMessage),
}).catch((error) => {
window.alert(error);
return;
});
setForm({ message: "" });
navigate("/");
}
return (
<>
<form onSubmit={onSubmit}>
<textarea
className="message"
type="text"
placeholder="Type somthing!"
// value={this.state.val}
></textarea>
<div className="body">
<button
className="button"
type="text"
value={form.name}
onClick={(e) => {
magic();
updateForm({ message: e.target.value });
handleButtonClick();
}}
>
<span className="default">Ping</span>
<span className="success">Wohoo! You Pinged Me!</span>
<div className="left"></div>
<div className="right"></div>
</button>
</div>
</form>
</>
);
};
export default Pingbutton;
