Как удалить компонент карты, используя идентификатор из объекта данных?

Question

Я построил клон Trello, используя ReactJS, где у меня есть 4 столбца с именами TODO, DOING, DONE и REJECTED, где я могу добавить карту в любой столбец.

В файле, который я пытаюсь для сопоставления компонента карты и свойств рендеринга из определенных фиктивных данных.

Что я хочу сделать?

• Я хочу удалить указанную карту c при нажатии на нее с помощью кнопки идентификатор карты в некотором роде.

В чем проблема?

• Я не понимаю, как удалить весь объект карты, когда он соответствует определенному идентификатору.

Мой TaskboardList. js компонент:

import React from "react";
import TaskboardCard from "./TaskboardCard";
import TaskboardActionButton from "./TaskboardActionButton";
import { Droppable } from "react-beautiful-dnd";

const TaskboardList = ({ title, cards, listID }) => {
  return (
    <Droppable droppableId={String(listID)}>
      {provided => (
        <div
          className="taskboardlist_container"
          {...provided.droppableProps}
          ref={provided.innerRef}
          style={styles.container}
        >
          <div className="sub-heading">{title}</div>
          {cards.map((card, index) => (
            <TaskboardCard
              key={card.id}
              index={index}
              text={card.text}
              id={card.id}
            />
          ))}
          <TaskboardActionButton listID={listID} />
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

const styles = {
  container: {
    backgroundColor: "#eee",
    width: 300,
    padding: "0.5rem",
    marginRight: "1rem",
    height: "100%"
  }
};

export default TaskboardList;

Моя TaskboardCard. js компонент

import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import { Draggable } from "react-beautiful-dnd";

const TaskboardCard = ({ text, id, index, sample }) => {
  return (
    <Draggable draggableId={String(id)} index={index}>
      {provided => (
        <div
          className="taskboard_container"
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <Card>
            <CardContent>
              <Typography style={{ fontSize: "1.5rem" }} gutterBottom>
                {text}
              </Typography>
            </CardContent>
          </Card>
        </div>
      )}
    </Draggable>
  );
};

export default TaskboardCard;

Для дальнейшей ссылки на другие файлы, я прилагаю моя ссылка на GitHub. Пожалуйста, рассмотрите посещение. Любая помощь приветствуется. https://github.com/abhinav-anshul/consensolabs

А вот ссылка на живую демонстрацию https://consensolab.abhinavanshul.com/

Answer 1

// src/actions/index.js
export const CONSTANTS = {
  ADD_CARD: "ADD_CARD",
  ADD_LIST: "ADD_LIST",
  DRAG_HAPPENED: "DRAG_HAPPENED",
  DELETE_CARD: "DELETE_CARD"
};

// src/actions/cardActions.js

export const deleteCard = cardId => ({
    type: CONSTANTS.DELETE_CARD,
    payload: { cardId }
});

// src/reducers/listReducers.js


const listReducer = (state = initialState, action) => {
  // ...

    case CONSTANTS.DELETE_CARD: {
      return {
        ...state,
        cards: state.cards.filter(({id}) => id !== action.payload.cardId)
      }
    }

Затем с вашей кнопки удаления вам просто нужно позвонить dispatch(deleteCard(cardId))

Редактировать: я обновил вашу песочницу кода, чтобы реализовать эту https://codesandbox.io/s/stupefied-golick-7z78k