CODEWITHSUNDEEP
reactjs
johnny
johnny

Reputation: 58

Click handler issue in React

I have written useState. The console log works, but even though the filter is correct, it doesn't change after the click. May I attach any clickHandler as a constant to an icon or div or section?

The <Task /> is added in the main container.

import React, { useState } from "react";
import { FaTimes } from "react-icons/fa";

const Task = () => {
  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
    console.log("deleted");
  };

  const [tasks, setTasks] = useState([
    { id: 1, text: "Football", reminder: true, day: " -March 22th at 20:30" },
    {
      id: 2,
      text: "Lunch Meeting",
      day: " -May 4th at 16:45",
      reminder: true,
    },
    {
      id: 3,
      text: "Holliday in Bahamas",
      reminder: true,
      day: " -July 25th at 00:00",
    },
  ]);

  return (
    <div>
      {tasks.map((task) => (
        <h3
          key={task.id}
          style={{
            margin: "20px",
            backgroundColor: "#cee1f4",
            justifyContent: "center",
          }}
        >
          {task.text}
          <FaTimes
            onClick={deleteTask}
            style={{
              color: " red",
              paddingLeft: "370px",
              position: "absolute",
              display: "flex",
              margin: "-8px 57px",
              cursor: "pointer",
            }}
          />
          <p>{task.day}</p>
        </h3>
      ))}
    </div>
  );
};

export { Task };

Upvotes: 1

Views: 61

Answers (1)

jack12
jack12

Reputation: 36

In <FaTimes> component, your onClick does not pass an ID, as is required by that function's parameter input.

This should work:

<FaTimes
  onClick={() => deleteTask(task.id)}
  style={{
    color: " red",
    paddingLeft: "370px",
    position: "absolute",
    display: "flex",
    margin: "-8px 57px",
    cursor: "pointer",
  }}
/>

Upvotes: 1

Related Questions