React.js: Why delete button is not working?

Question

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:

import React from "react";
const BlogBody = props => {
  return props.postData.map(post => {
    const { title, author, content } = post;
    return (
      <React.Fragment key={post}>
        <h2>{title}</h2>
        <h5>
          <i>{author}</i>
        </h5>
        <h3>{content}</h3>
        <br />
        <button onClick={()=>props.removePosts(post)}>Delete</button>
        <hr />
      </React.Fragment>
    );
  });
};

const Blog=(props)=>{
  const {postData,removePosts}=props;
  return(
    <div>
      <BlogBody postData={postData} removePosts={removePosts}/>
    </div>
  )
}

export default Blog;

the App.js code is given below:

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=>{
    const{posts}=this.state

    this.setState({
        posts:posts.filter((post,i)=>{
            return i!==index
        }),
    })
}
    render(){
        const {posts}=this.state       
            return (  
                <div style={{padding:8}} className="container">
                    <Createpost/>
                    <hr/>
                    <Blog postData={posts} removePosts={this.removePosts}/>
                </div>
            );
        }

    }

export default App ;

and Createpost.js is give below:

import React, {Component} from 'react'
class Createpost extends Component {

    render() { 
        return ( 
            <form onSubmit={e=>e.preventDefault()}>
            <div>
                <label htmlFor="create-title">Title:</label>
                <input type="text" name="create-title" id="create-title"/>
            </div>
            <textarea/>
            <input type="submit" value="Create"/>
            </form>
         );
    }
}

export default Createpost;

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.

thanx in advance

Answer 1

The problem is with the removePost function Because you are passing whole post object

<button onClick={()=>props.removePosts(post)}>Delete</button>

but when you are checking you are checking with the index

return i!==index

**Try this : **

   return props.postData.map((post, index) => {
    const { title, author, content } = post;
    return (
      <React.Fragment key={post}>
        <h2>{title}</h2>
        <h5>
          <i>{author}</i>
        </h5>
        <h3>{content}</h3>
        <br />
        <button onClick={()=>props.removePosts(index)}>Delete</button>
        <hr />
      </React.Fragment>
    );
  });

Pass the index to the function as parameter

Answer 2

add parameter index to removePostprops.postData.map((post, index) => {

then pass argument index to it

<button onClick={() => props.removePosts(index)}>Delete</button>

https://codesandbox.io/s/festive-oskar-04ufb