title: Delete data in React using Firebase Cloud
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/X4ZPT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X4ZPT.png" alt="enter image description here"></a></p>
  
  <p>This is code call lists</p>
  
  <pre><code>const ProjectList = ({projects}) =&gt; {
    return (
      &lt;div className="project-list section"&gt;
        { projects &amp;&amp; projects.map(project =&gt; {
          return (
            &lt;Link to={'/project/' + project.id} key={project.id}&gt;
              &lt;ProjectSummary project={project} /&gt;
            &lt;/Link&gt;
          )
        })}  
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>This is ProjectSummary</p>
  
  <pre><code>const ProjectSummary = ({project}) =&gt; {
    return (
      &lt;div className="card z-depth-0 project-summary"&gt;
        &lt;div className="card-content grey-text text-darken-3"&gt;
          &lt;span className="card-title "&gt;{project.title}&lt;/span&gt;
          &lt;p&gt;Created by {project.authorFirstName} {project.authorLastName} admin&lt;/p&gt;
          &lt;p className="grey-text"&gt;{moment(project.createdAt.toDate()).calendar()}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>And structure data in Firebase </p>
  
  <p><a href="https://i.stack.imgur.com/GvdzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GvdzN.png" alt="enter image description here"></a></p>