I'm new React, Today, I using React and Firebase to display, add and delete data. I have some data get Firebase and display in cards. Now, I want delete some want card, but I don't know. You can tell me how do it? Maybe create "X" button in top-right and when click, it deleted.

[![enter image description here](https://i.stack.imgur.com/X4ZPT.png)](https://i.stack.imgur.com/X4ZPT.png)

This is code call lists

```
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>
  )
}

```

This is 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>
  )
}

```

And structure data in Firebase 

[![enter image description here](https://i.stack.imgur.com/GvdzN.png)](https://i.stack.imgur.com/GvdzN.png)