How do I make the blog detail visible on page in React?

Question

I am new to react. And after a long break from tech field, I am learning java. I would be thankful for your help.

How should I correct in this code that the blog would return (display) the post, its title, author, body, date etc. on the page as indicated?

Thank you.

BlogDetail.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

function BlogDetail() {
  const [setBlogs] = useState([]);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await axios.get(`http://localhost:8000/api/blog/`);
        setBlogs(res.data);
      } catch (err) {}
    };

    fetchBlogs();
  }, []);

  return (BlogPost) => (
    <div className="container-m-3">
      <article>
        <Link to={`/blog/${BlogPost.slug}`} className="stretched-link">
          {BlogPost.title}
        </Link>
        <h1 className="display-2">{BlogPost.title}</h1>
        <h2 className="text-muted mt-3">
          Category: {capitalizeFirstLetter(BlogPost.category)}
        </h2>
        <h4>
          {BlogPost.month} {BlogPost.day}
        </h4>
        <p>Written by {BlogPost.author}</p>
        <div>{BlogPost.body}</div>
        <hr />
        <p className="lead mb-5">
          <Link
            to="http://localhost:8000/api/blog/"
            className="font-weight-bold"
          >
            Front Page
          </Link>
        </p>
      </article>
    </div>
  );
}

const capitalizeFirstLetter = (word) => {
  if (word) return word.charAt(0).toUpperCase() + word.slice(1);
  return "";
};

export default BlogDetail;

It is an app.js with Router/element location.

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

const App = () => (
    <Router>
        <Layout>
            <Routes>
                <Route path='/' element={<Home/>} />
                <Route path='/blog' element={<Blog/>} />
                <Route path='/blog/:id' element={<BlogDetail/>} />
                <Route path='/category/:id' element={<Category/>} />
            </Routes>
        </Layout>
    </Router>
);

export default App;

Answer 1

Your code is pretty close but I've made some adjustments below. I see two main issues: 1) you need to specify the state variable that will hold the blogs and 2) then you need to loop through the blogs from the api and render each of them.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';


    function BlogDetail() {
        // blogs is the data, setBlogs is a function that sets the value of blogs
        const [ blogs, setBlogs ] = useState([]);
        

        useEffect(() => {
            const fetchBlogs = async () => {
                try {
                    const res = await axios.get(`http://localhost:8000/api/blog/`);
                    setBlogs(res.data);
                }
                catch (err) {
    
                }
            }
    
            fetchBlogs();   
        }, []);
    

    return (
        <div className="container-m-3">
          {blogs.map((BlogPost, index) => (
            <article key={index}>
                <Link to={`/blog/${BlogPost.slug}`} className="stretched-link">{BlogPost.title}</Link>
                <h1 className='display-2'>{BlogPost.title}</h1>
                <h2 className='text-muted mt-3'>Category: {capitalizeFirstLetter(BlogPost.category)}</h2>
                <h4>{BlogPost.month} {BlogPost.day}</h4>
                <p>Written by {BlogPost.author}</p>
                <div>{BlogPost.body}</div>
                <hr />
                <p className='lead mb-5'><Link to='http://localhost:8000/api/blog/' className='font-weight-bold'>Front Page</Link></p>
            </article>
           )}
        </div>              
    );


};

    const capitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };
    
    

export default BlogDetail;