CRUD comentado

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
    // Estado de los posts. Aquí cargaremos la información de la api
    // Parecido a la de tareas
  const [posts, setPosts] = useState([]);
  // Para el formulario, en este caso todos los campos dentro de un objeto
  const [nuevoPost, setNuevoPost] = useState({ title: '', body: '' });

  // Esto se ejecuta la primera vez
  useEffect(() => {
    // Llamamos a la función que carga los posts
    obtenerPosts();
  }, []);

  // Aquí tenemos tres funciones porque son las tres operaciones que podemos hacer:
  // Leer, añadir y eliminar.
  // Es mejorable, pero funciona

  // Llamamos con axios a la api y ponemos lo obtenido en el estado
  const obtenerPosts = async () => {
    try {
      const response = await axios.get('http://localhost:4000/posts');
      setPosts(response.data);
    } catch (error) {
      console.error('Error al obtener posts:', error);
    }
  };

  // LLamamamos a la api con POST y los datos del formulario
  const agregarPost = async () => {
    try {
      await axios.post('http://localhost:4000/posts', nuevoPost);
      // Ponemos a cero el formulario
      setNuevoPost({ title: '', body: '' });
      // Cargadmos los datos de la api (podríamos hacerlo directamente en el estado)
      obtenerPosts();
    } catch (error) {
      console.error('Error al agregar post:', error);
    }
  };

  // Llamamos a la api con DELETE
  const eliminarPost = async (id) => {
    try {
      await axios.delete(`http://localhost:4000/posts/${id}`);
      // Cargamos los datos de nuevo
      obtenerPosts();
    } catch (error) {
      console.error('Error al eliminar post:', error);
    }
  };

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {/* Lista de todos los posts con su 'key */}
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
            <button onClick={() => eliminarPost(post.id)}>Eliminar</button>
          </li>
        ))}
      </ul>
      {/** Formulario, el change no llama a ninguna función, directamente cambia el estado en
       * los dos campos. Yo prefiero hacerlo con una sola función.
       */}
      <h2>Agregar nuevo post</h2>
      <input
        type="text"
        value={nuevoPost.title}
        onChange={(e) => setNuevoPost({ ...nuevoPost, title: e.target.value })}
        placeholder="Título"
      />
      <textarea
        value={nuevoPost.body}
        onChange={(e) => setNuevoPost({ ...nuevoPost, body: e.target.value })}
        placeholder="Cuerpo"
      />
      <button onClick={agregarPost}>Agregar post</button>
    </div>
  );
};

export default App;

db.json

{
  "posts": [
    {
      "id": "1",
      "title": "Post 1",
      "body": "Cuerpo del post 1"
    },
    {
      "id": "29d4",
      "title": "Post 3",
      "body": "holi"
    },
    {
      "id": "e4da",
      "title": "dfsdfsdfsd",
      "body": "asdasd"
    }
  ]
}