title: React.js: Why delete button is not working?
body: <p>I am working on a blog frontpage where I would like to remove a particular post by pressing a delete button through simple setState command. my Blog.js is Below:</p>
  
  <pre><code>import React from "react";
  const BlogBody = props =&gt; {
    return props.postData.map(post =&gt; {
      const { title, author, content } = post;
      return (
        &lt;React.Fragment key={post}&gt;
          &lt;h2&gt;{title}&lt;/h2&gt;
          &lt;h5&gt;
            &lt;i&gt;{author}&lt;/i&gt;
          &lt;/h5&gt;
          &lt;h3&gt;{content}&lt;/h3&gt;
          &lt;br /&gt;
          &lt;button onClick={()=&gt;props.removePosts(post)}&gt;Delete&lt;/button&gt;
          &lt;hr /&gt;
        &lt;/React.Fragment&gt;
      );
    });
  };
  
  const Blog=(props)=&gt;{
    const {postData,removePosts}=props;
    return(
      &lt;div&gt;
        &lt;BlogBody postData={postData} removePosts={removePosts}/&gt;
      &lt;/div&gt;
    )
  }
  
  export default Blog;
  </code></pre>
  
  <p>the App.js code is given below:</p>
  
  <pre><code>import React,{Component} from 'react';
  import Blog from './Blog'
  import Createpost from './Createpost'
  
  
  class App extends Component {
  state={
       user:'ali',
          posts:[
              {
                  title:'First',
                  author:'Written by Ali',
                  content:'first Post',
              },
              {
                  title:'Second',
                  author:'Written by Ali',
                  content:'Second Post',
              },
              {
                  title:'third',
                  author:'Written by Ali',
                  content:'third Post',
              },
          ]
  };
  removePosts=index=&gt;{
      const{posts}=this.state
  
      this.setState({
          posts:posts.filter((post,i)=&gt;{
              return i!==index
          }),
      })
  }
      render(){
          const {posts}=this.state       
              return (  
                  &lt;div style={{padding:8}} className="container"&gt;
                      &lt;Createpost/&gt;
                      &lt;hr/&gt;
                      &lt;Blog postData={posts} removePosts={this.removePosts}/&gt;
                  &lt;/div&gt;
              );
          }
  
      }
  
  export default App ;
  </code></pre>
  
  <p>and Createpost.js is give below:</p>
  
  <pre><code>import React, {Component} from 'react'
  class Createpost extends Component {
  
      render() { 
          return ( 
              &lt;form onSubmit={e=&gt;e.preventDefault()}&gt;
              &lt;div&gt;
                  &lt;label htmlFor="create-title"&gt;Title:&lt;/label&gt;
                  &lt;input type="text" name="create-title" id="create-title"/&gt;
              &lt;/div&gt;
              &lt;textarea/&gt;
              &lt;input type="submit" value="Create"/&gt;
              &lt;/form&gt;
           );
      }
  }
  
  export default Createpost;
  </code></pre>
  
  <p>there is no error showing and the page is showing the way I wanted right now after excuting npm start. but the problem is when I press delete button, it's not working which means no post row is deducted. I don't know what went wrong. please help me on this. I have started it very recently.... so still I have lot more thing to learn... if you explain it further it will be a great help for me understand also.</p>
  
  <p>thanx in advance</p>