trying to delete from an API using axios and React hooks - reactjs

Question

Hello im trying to delete a Booking from an api using an input with the ID . obviously something is wrong. I tried to convert my class to a HOC and i just cant get it to work. Right now i cant even type in the textbox .
I know i have severals errors but i dont know how to solve them would appreciate some help. the only relevant parts in the HTML is the form.
const DeleteBooking = () => {
const [ModalIsOpen, SetModalIsOpen] = useState(false); // set false if closen when open
const [booking, setDelete] = useState([]);
const handleChange = (e) => {
setDelete({ [e.target.name]: e.target.value });
};
useEffect((UserIdInput) => {
const bookingId = UserIdInput.target.elements.bookingId.value;
Axios.delete(`https://localhost:44366/api/Products/${bookingId}`) // change api key
.then((response) => {
console.log(response);
setDelete(response.data);
});
}, []);
return (
<>
<div className="App-header">
<button onClick={() => SetModalIsOpen(true)}>Radera bokning</button>
</div>
<Modal
isOpen={ModalIsOpen}
onRequestClose={() => SetModalIsOpen(false)}
style={{
overlay: {
background:
"linear-gradient(-500deg, #ee7752, #6e1b3b, #0c495f, #000000)",
},
content: {
color: "black",
textAlign: "center",
},
}}
>
<div>
<h1>Radera Bokning</h1>
<p style={{ marginTop: "20px" }}>
Vänligen ange ditt bokningsNummer för att radera din bokning
</p>
<form onSubmit={() => setDelete}>
<input
onChange={handleChange}
type="text"
name=" bookingId"
placeholder="BokningsID"
value="bookingId"
></input>
<button type="submit"></button>
</form>
<button
style={{ marginTop: "100px" }}
onClick={() => SetModalIsOpen(false)}
>
Tillbaka
</button>
</div>
</Modal>
</>
);
};
export default DeleteBooking;

Answer 1

Here is an incredibly simple example (working sandbox) that you can build upon:
import Axios from "axios";
import React, { useState } from "react";
// => Component Code
// -> This component will be used to delete posts
export default function App() {
// => State
const [readPostId, writePostId] = useState("");
const [readStatus, writeStatus] = useState("");
// => Handlers
const updatePostId = (e) => writePostId(e.target.value);
const deletePost = async (e) => {
e.preventDefault();
try {
await Axios.delete(`${API_ENDPOINT}/${readPostId}`);
writeStatus("Post successfully deleted");
setTimeout(() => writeStatus(""), 3000);
} catch (err) {
writeStatus("Post deletion failed");
}
};
return (
<div>
<h1>Delete Posts Page</h1>
<h2>Enter your Post ID:</h2>
<em>Press 'Delete' without entering a number to cause an error</em>
<form onSubmit={deletePost}>
<input onChange={updatePostId} value={readPostId} />
<input type="submit" value="Delete" />
</form>
{readStatus && <p>{readStatus}</p>}
</div>
);
}
// => Support Code
const API_ENDPOINT = "https://jsonplaceholder.typicode.com/posts";