React Design Patterns~Container Componets / Loader Component~

const express = require("express");

const app = express();

app.use(express.json());

let users = [
  {
    id: "1",
    name: "Smith",
  　age: 30,
  　country: "UK",
  　magazines: ["VOGUE UK", "ID-MAGAZINE"],
  },
  {
    id: "2",
   　name: "Kate",
  　age: 31,
  　country: "US",
  　magazines: ["VOGUE US", "ELLE"],
  },
  {
    id: "3",
    name: "Josh",
  　age: 32,
  　country: "AUSTRALIA",
  　magazines: ["VOGUE AU", "BAZAAR"],
  },
];

app.get("/users/:id", (req, res) => {
  const { id } = req.params;
  console.log(id);
  res.json(users.find((user) => user.id === id));
});

let SERVER_PORT = 8080;
app.listen(SERVER_PORT, () =>
  console.log(`Server is listening on port: ${SERVER_PORT}`)
);

export const UserInfo = ({ user }) => {
  const { name, age, country, magazines} = user || {};
  return user ? (
    <>
      <h2>{name}</h2>
      <p>Age: {age} years</p>
      <p>Country: {country}</p>
      <h2>Books</h2>
      <ul>
        {magazines.map((magazine) => (
          <li key={magazine}> {magazine} </li>
        ))}
      </ul>
    </>
  ) : (
    <h1>Loading...</h1>
  );
};

import React, { useEffect, useState } from "react";

export const DataSourceWithRender = ({ getData = () => {}, render }) => {
  const [resource, setResource] = useState(null);

  useEffect(() => {
    (async () => {
      const data = await getData();
      setResource(data);
    })();
  }, [getData]);

  return render(resource);
};

import axios from "axios";
import "./App.css";
import { UserInfo } from "./components/user-info";
import { DataSourceWithRender } from "./components/data-source-with-render";

const fetchData = async (url) => {
  const response = await axios.get(url);
  return response.data;
};

function App() {
  return (
    <>
      <DataSourceWithRender
        getData={() => fetchData("/users/1")}
        render={(resouce) => <UserInfo user={resouce} />}
      ></DataSourceWithRender>
    </>
  );
}

export default App;