Use Callbacks To Delete An Item

Add Delete Button

To be able to manage our FAQ entries, we start by adding a delete button to remove an item from the list. Add the delete button to the FaqItem view in the FaqItem.jsx file. Create an empty onDelete handler which is called when the button is pressed.

Solution

import { useState } from "react";
import "./FaqItem.css";
import PropTypes from "prop-types";

const FaqItem = (props) => {
  const [isAnswer, setAnswer] = useState(false);

  const toggle = () => {
    setAnswer(!isAnswer);
  };
  const ondelete = () => {};

  return (
    <li className="faq-item">
      <h2 className="question" onClick={toggle}>
        {props.question}
      </h2>
      {isAnswer && <p>{props.answer}</p>}
      <button onClick={ondelete}>Delete</button>
    </li>
  );
};

FaqItem.propTypes = {
  question: PropTypes.string.isRequired,
  answer: PropTypes.string.isRequired,
};

export default FaqItem;

--- a/src/components/FaqItem.jsx
+++ b/src/components/FaqItem.jsx
@@ -8,6 +8,7 @@ const FaqItem = (props) => {
   const toggle = () => {
     setAnswer(!isAnswer);
   };
+  const ondelete = () => {};

   return (
     <li className="faq-item">
@@ -15,6 +16,7 @@ const FaqItem = (props) => {
         {props.question}
       </h2>
       {isAnswer && <p>{props.answer}</p>}
+      <button onClick={ondelete}>Delete</button>
     </li>
   );
 };

Write The onDelete Handler

Now that we have our dummy handler ready, we need to add functionality to the handler. Since the list of FAQ items is managed by our App component, we cannot directly remove the item. Rewrite the FaqItem component so that both a unique identifier of the FAQ item and a callback to remove the FAQ item can be passed to this component. Also complete the onDelete handler such that it will call the callback with the correct identifier.

Solution

import { useState } from "react";
import "./FaqItem.css";
import PropTypes from "prop-types";

const FaqItem = (props) => {
  const [isAnswer, setAnswer] = useState(false);

  const toggle = () => {
    setAnswer(!isAnswer);
  };
  const ondelete = () => {
    props.onDelete(props.index);
  };

  return (
    <li className="faq-item">
      <h2 className="question" onClick={toggle}>
        {props.question}
      </h2>
      {isAnswer && <p>{props.answer}</p>}
      <button onClick={ondelete}>Delete</button>
    </li>
  );
};

FaqItem.propTypes = {
  question: PropTypes.string.isRequired,
  answer: PropTypes.string.isRequired,
  index: PropTypes.number.isRequired,
  onDelete: PropTypes.func.isRequired,
};

export default FaqItem;

--- a/src/components/FaqItem.jsx
+++ b/src/components/FaqItem.jsx
@@ -8,7 +8,9 @@ const FaqItem = (props) => {
   const toggle = () => {
     setAnswer(!isAnswer);
   };
-  const ondelete = () => {};
+  const ondelete = () => {
+    props.onDelete(props.index);
+  };

   return (
     <li className="faq-item">
@@ -24,6 +26,8 @@ const FaqItem = (props) => {
 FaqItem.propTypes = {
   question: PropTypes.string.isRequired,
   answer: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  onDelete: PropTypes.func.isRequired,
 };

 export default FaqItem;

Write A Dummy Delete Handler

Now we're ready to change the App component to add a dummy onDelete handler. Add the onDelete handler to the App component, which logs the index of the FAQ item to the console. Make sure to pass the index and the callback to the FaqItem component to wire everything together:

Solution

import { useState } from "react";
import "./App.css";
import FaqItem from "./components/FaqItem";

function App() {
  const [faqList, setFaqList] = useState([
    {
      question: "What does the Plone Foundation do?",
      answer: "The mission of the Plone Foundation is to protect and...",
    },
    {
      question: "Why does Plone need a Foundation?",
      answer: "Plone has reached critical mass, with enterprise...",
    },
  ]);

  const onDelete = (index) => {
    console.log(index);
  };

  return (
    <ul>
      {faqList.map((item, index) => (
        <FaqItem
          key={index}
          question={item.question}
          answer={item.answer}
          index={index}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

export default App;

--- a/src/App.js
+++ b/src/App.js
@@ -14,10 +14,20 @@ function App() {
     },
   ]);

+  const onDelete = (index) => {
+    console.log(index);
+  };
+
   return (
     <ul>
       {faqList.map((item, index) => (
-        <FaqItem key={index} question={item.question} answer={item.answer} />
+        <FaqItem
+          key={index}   
+          question={item.question}
+          answer={item.answer}
+          index={index}
+          onDelete={onDelete}
+        />
       ))}
     </ul>
   );

Delete The FAQ Item From The List

The last step is to remove the item from the list. Write the onDelete handler which removes the item from the list and creates the new state.

Solution

  const onDelete = (index) => {
    let faq = [...faqList];
    faq.splice(index, 1);
    setFaqList(faq);
  };

--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,9 @@ function App() {
   ]);

   const onDelete = (index) => {
-    console.log(index);
+    let faq = [...faqList];
+    faq.splice(index, 1);
+    setFaqList(faq);
   };

   return (