React Delete Blog Post

README.md

React Delete Blog Post

This is a snippet for a deleting a blog post in a simple React blog app. As you can see, the blog posts are being copied over and over whenever we delete a post. I don't know whether this is a proper method or not. But I think it's okay since we only create one instance of newBlogs whenever handleDelete is called by the onClick event.

App.js

import Navbar from './Navbar';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <Navbar />
      <div className="content">
          <Home/>
      </div>
    </div>
  );
}

export default App;

BlogList.js

const BlogList = ({blogs, title, handleDelete}) => {

    return (
        <div className="blog-list">
            <h2>{ title }</h2>
            {blogs.map((blog) => (
                <div className="blog-preview" key={blog.id}>
                    <h2>{ blog.title }</h2>
                    <p>Written by { blog.author }</p>
                    <button onClick={() => handleDelete(blog.id)}>delete blog</button>
                </div>
            ))}
        </div>
    );
}

export default BlogList;

Home.js

import { useState } from 'react';
import BlogList from './BlogList';

const Home = () => {
    const [blogs, setBlogs] = useState([
        {title:'My new website', body:'lorem ipsum...', author:'mario', id:1},
        {title:'Welcome to the party!', body:'lorem ipsum...', author:'yoshi', id:2},
        {title:'Web dev top tips', body:'lorem ipsum...', author:'mario', id:3},
        {title:'How to Find Your Dragon', body:'lorem ipsum...', author:'Keisha', id:4}
    ]);

    const handleDelete = (blogId) => {
        setBlogs(blogs => blogs.filter(({id}) => id !== blogId));
    }

    return(
        <div className="home">
            <BlogList blogs={blogs} title = "All Blogs!" handleDelete={handleDelete}/>
        </div>
    );
}

export default Home;

index.css

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* base styles */
* {
  margin: 0;
  padding: 0;
  font-family: "Quicksand";
  color: #333;
  box-sizing: border-box;
}

.navbar {
  padding: 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
}

.navbar h1 {
  color:#f1356d;
}

.navbar .links {
  margin-left: auto;
}

.navbar a {
  margin-left: 16px;
  text-decoration: none;
  padding: 6px;
}

.navbar a:hover {
  color: #f1356d;
  cursor: pointer;
}

.content {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}

/* blog previews */
.blog-preview {
  padding:10px 16px;
  margin:20px 0;
  border-bottom: 1px solid #f2f2f2;
}

.blog-preview:hover {
  cursor: pointer;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
}

.blog-preview h2 {
  font-size: 20px;
  color: #f1356d;
  margin-bottom: 8px;
}

Navbar.js

const Navbar = () => {
    return (
        <nav className="navbar">
            <h1>Ifindev Blog</h1>
            <div className="links">
                <a href="/">Home</a>
                <a href="/create">New Blog</a>
            </div>
        </nav>
    );
}

export default Navbar;

yang handleDelete() bisa dibikin lebih singkat

    const handleDelete = (blogId) => {
        setBlogs(blogs => blogs.filter(({id}) => id !== blogId));
    }

yang handleDelete() bisa dibikin lebih singkat

    const handleDelete = (blogId) => {
        setBlogs(blogs => blogs.filter(({id}) => id !== blogId));
    }

Okeesiip. Terimakasih.