Is there a way to handle input hidden value in onSubmit? - reactjs

Question

I'm creating a todo app and I'm thinking of sending the id of the todo I want to delete using the post method to delete it. I'm currently using <form action="localhost" method="delete">, but I'd like to do something a little more complicated, so I'm trying to pass the id to the OnSubmit handler. is there a way to use the id in OnSubmit? Is there any way to use id in OnSubmit?
Implemented code
import React, {useState, useEffect} from "react";
import axios from "axios";
interface Todo {
id: number,
text: string,
}
const ShowContent = () => {
const [todoes, setTodoes] = useState<Todo[]>([]);
useEffect(() => {
axios.get<Todo[]>("http://localhost:8888")
.then(res => {
setTodoes(res.data)
})
.catch(_ => alert("useeffect error"))
}, [])
return (
<div>
<h1>Todo App</h1>
{todoes.map(todo =>
<div key={todo.id}>
<div>id: {todo.id}, text: {todo.text}</div>
<form action="localhost:8888" method="post">
<input type="hidden" name="id" value={todo.id}></input>
<button>Delete</button>
</form>
</div>
)}
<div>
<form action="localhost:8888" method="post">
<input type="text"></input>
<button>Submit</button>
</form>
</div>
</div>
);
}
What I want to do
import React, {useState, useEffect} from "react";
import axios from "axios";
interface Todo {
id: number,
text: string,
}
const ShowContent = () => {
const [todoes, setTodoes] = useState<Todo[]>([]);
useEffect(() => {
axios.get<Todo[]>("http://localhost:8888")
.then(res => {
setTodoes(res.data)
})
.catch(_ => alert("useeffect error"))
}, [])
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// I want to get the id here.
}
return (
<div>
<h1>Todo App</h1>
{todoes.map(todo =>
<div key={todo.id}>
<div>id: {todo.id}, text: {todo.text}</div>
<form onSubmit={handleOnSubmit}>
<input type="hidden" name="id" value={todo.id}></input>
<button>submit</button>
</form>
</div>
)}
</div>
);
}
export default ShowContent;

Answer 1

It is possible to get the id from your hidden input through the event using e.target either with FormData or document.querySelector, but there are Typsecript issues with this.
You already have access to the todo in the loop where you create the form, so my recommendation is that you create a function which already knows the id.
You can change your handler to a curried function like this:
const handleOnSubmit = (id: number) => (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(`submitted todo ${id}`);
}
And use it like this:
<form onSubmit={handleOnSubmit(todo.id)}>