jsonplaceholder api

App.js

import React from "react";
import PostDetails from "./components/PostDetails";
import Posts from "./components/Posts";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/" element={<Posts />} />
          <Route path="/post/:id" element={<PostDetails />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

Posts.js

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import "../App.css";

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const fetchPosts = async () => {
    const data = await fetch("https://jsonplaceholder.typicode.com/posts");
    const json = await data.json();
    setPosts(json);
  };

  const truncate = (str, n) => {
    return str?.length > n ? str.substr(0, n - 1) + "..." : str;
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <div className="posts">
      {posts &&
        posts.map((post) => (
          <div key={post.id} className="post">
            <h2>{truncate(post.title, 20)}</h2>
            <p>{truncate(post.body, 40)}</p>
            <Link to={`/post/${post.id}`}>
              <p>view more...</p>
            </Link>
          </div>
        ))}
    </div>
  );
};

export default Posts;

PostsDetails.js

import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";

const Post = () => {
  const [post, setPost] = useState([]);
  const params = useParams();
  const navigate = useNavigate();

  const fetchPost = async () => {
    const data = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${params.id}`
    );
    const json = await data.json();
    setPost(json);
  };

  useEffect(() => {
    fetchPost();
  }, []);

  return (
    <div>
      {post && (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
          <button onClick={() => navigate("/")} type="button">
            Go Home
          </button>
        </div>
      )}
    </div>
  );
};

export default Post;