PostSparrow

React Basic Structure

App.js

import React from 'react';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import UserFile from './components/UserFile';
import UserDetail from './components/UserDetail';

function App() {
  return (
    <div>
       <BrowserRouter>
            <Routes>
              <Route exact path="/" element={<UserList />} />
              <Route path="/detail/:id" element={<UserDetail/>} />
            </Routes>
      </BrowserRouter>
    </div>

  )
}

export default App;

UserList.js

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

function UserList(){
    const [dataUser, fetchDataUser] = useState([])

    const getData = () => {
        fetch('https://fakestoreapi.com/products')
            .then((data) => data.json())
            .then((data) => {
            fetchDataUser(data)
        })
    }
    useEffect(() => {
        getData()
      }, [])
    
      return (
        <>
            <table border={2}>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {dataUser.map((item, i) => {
                        return <tr>
                            <td>{i+1}</td>
                            <td>{item.title}</td>
                            <td>{item.description}</td>
                            <td><Link to={`/about/${item.id}`}>Show</Link></td>
                        </tr>
                    })}
                </tbody>
            </table>
        </>
      )
}
export default UserList;

UserDetail.js

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

function UserDetail(){
    const { id } = useParams();
    const [dataUser, fetchDataUser] = useState([])

    const getData = () => {
        fetch('https://fakestoreapi.com/products/'+id)
            .then((data) => data.json())
            .then((data) => {
            fetchDataUser(data)
            // console.log(data)
        })
    }
    useEffect(() => {
        getData()
      }, [])
    
      return (
        <>
            <table border={2}>
                <tbody>
                    <td>{dataUser.id}</td>
                    <td>{dataUser.title}</td>
                    <td>{dataUser.description}</td>
                </tbody>
            </table>
        </>
      )
}
export default UserDetail;