完成したアプリケーション

こちらのリンクからも確認できます

開発環境

今回は、CodeSandboxを使って開発を進めていきます

Create SandboxからReactを選択してください!

Reactプロジェクトがセットアップされます！

それぞれ該当するファイルに下記のソースコードをコピーペーストしてください！

App.js

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [blogs, setBlogs] = useState([
    { id: 1, author: "mario", title: "First", body: "First  post" },
    { id: 2, author: "mario", title: "Second", body: "Second post" }
  ]);

  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [body, setBody] = useState("");
  const [id, setId] = useState(0);

  const [isEdit, setIsEdit] = useState(false);

  // Add
  const handleAddPost = () => {
    if (!title || !author || !body) {
      return alert("Please input something ");
    }

    const newPost = {
      id: Math.floor(Math.random() * 1000),
      author: author,
      title: title,
      body: body
    };

    setBlogs([...blogs, newPost]);

    setTitle("");
    setAuthor("");
    setBody("");
  };

  // Delete
  const deletePost = (id) => {
    const newBlogs = blogs.filter((blog) => blog.id !== id);
    setBlogs(newBlogs);
  };

  // Edit
  const handleEdit = () => {
    setBlogs(
      blogs.map((blog) => {
        return blog.id === id
          ? { ...blog, title: title, author: author, body: body }
          : blog;
      })
    );

    setTitle("");
    setAuthor("");
    setBody("");
    setId(0);
    setIsEdit(false);
  };

  const editPost = (blog) => {
    setIsEdit(true);

    setTitle(blog.title);
    setAuthor(blog.author);
    setBody(blog.body);
    setId(blog.id);

    window.scroll({ top: 0, behavior: "smooth" });
  };

  return (
    <div className="App">
      <h1>All Blogs</h1>
      <h2>Total posts :{blogs.length}</h2>

      <div className="inputForm">
        <input
          type="text"
          placeholder="Title..."
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <input
          type="text"
          placeholder="Author..."
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        />
        <input
          type="text"
          placeholder="Body..."
          value={body}
          onChange={(e) => setBody(e.target.value)}
        />

        {isEdit ? (
          <button className="add-btn" onClick={handleEdit}>
            Edit
          </button>
        ) : (
          <button className="add-btn" onClick={handleAddPost}>
            Add Post
          </button>
        )}
      </div>

      {blogs.map((blog) => (
        <div key={blog.id} className="card">
          <div>
            <h1>Title : {blog.title}</h1>
            <p>Body : {blog.body}</p>
            <p>Author : {blog.author}</p>
          </div>

          <div>
            <button onClick={() => deletePost(blog.id)} className="delete-btn">
              Delete
            </button>
            <button onClick={() => editPost(blog)} className="edit-btn">
              Edit
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
  align-items: center;
}

.inputForm {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: auto;
}

input {
  padding: 5px;
  margin-top: 5px;
}

.add-btn {
  padding: 5px;
  width: 50%;
  margin: 5px auto;
  background-color: #329eff;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid black;
}

.add-btn:hover {
  background-color: #b8dcf5;
}

.delete-btn {
  padding: 5px;
  width: 30%;
  margin: auto;
  background-color: #f16f6f;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgb(214, 18, 18);
}

.delete-btn:hover {
  background-color: #f5bbc0;
}

.edit-btn {
  padding: 5px;
  width: 30%;
  margin: auto;
  background-color: #45eb90;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid green;
}

.edit-btn:hover {
  background-color: #ade7c6;
}

.card {
  border: solid 2px #329eff;
  width: 60%;
  border-radius: 20px;
  padding: 4px;
  margin: 8px auto;
  background-color: rgb(243, 243, 230);
}