Удалите данные в React, используя Firebase Cloud

Question

Я новичок в React. Сегодня я использую React и Firebase для отображения, добавления и удаления данных. У меня есть некоторые данные, которые получают Firebase и отображаются в карточках. Теперь я хочу удалить какую-нибудь карточку, но я не знаю. Вы можете сказать мне, как это сделать? Может быть, создать кнопку «X» в правом верхнем углу, и когда щелкнул, он удалил.

Это код списков вызовов

const ProjectList = ({projects}) => {
  return (
    <div className="project-list section">
      { projects && projects.map(project => {
        return (
          <Link to={'/project/' + project.id} key={project.id}>
            <ProjectSummary project={project} />
          </Link>
        )
      })}  
    </div>
  )
}

Это ProjectSummary

const ProjectSummary = ({project}) => {
  return (
    <div className="card z-depth-0 project-summary">
      <div className="card-content grey-text text-darken-3">
        <span className="card-title ">{project.title}</span>
        <p>Created by {project.authorFirstName} {project.authorLastName} admin</p>
        <p className="grey-text">{moment(project.createdAt.toDate()).calendar()}</p>
      </div>
    </div>
  )
}

И структура данных в Firebase

Answer 1

Вы можете добавить кнопку для удаления в элементе списка ProjectSummary, подобный этому

<button onClick={() => this.removeProject(project.id)}>Delete</button>

Идентификатор будет уникальным ключом firebase, например, ahakhka734hfakh3

Затем в обратном вызове мы можем вызвать firebase.database.() метод удаления, который удаляет его со страницы следующим образом.

removeProject(projectId) {
  const projectRef= firebase.database().ref(`/projects/${projectId}`);
  projectRef.remove();
}