trying to delete from an API using axios and React hooks

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;

I can help you. One moment. I'll create an example you might find useful. — Alex Mckay
– Alex Mckay, Commented Nov 17, 2020 at 4:00

Alex Mckay · Accepted Answer · 2020-11-17 04:18:01Z

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";

answered Nov 17, 2020 at 4:18

Alex Mckay

3,7461 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M R Over a year ago

im going to try this thank you btw why did u remove useEffect just wondering . is that hook only when reciving data?

Alex Mckay Over a year ago

You are welcome. You should definite read the documentation that covers your question. You will get a lot out of it - I promise. I re-read the docs about once a year and I continue to learn from them.

Collectives™ on Stack Overflow

trying to delete from an API using axios and React hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related