I am creating an application that consumes a rest API and displays the results, after completing the
app and I ran the build it shows a blank screen see the code below

import React from "react";
import Home from "./webpages/Home";

function App() {
  return (
    

      
    
  );
}
export default App;

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import User from "./User";
import UserDetail from "./UserDetail";

const Home = () => {
  return (
    
      
        
        
      
    
  );
};
export default Home;

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

const User = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/")
      .then((res) => res.json())
      .then(
        (data) => {
          setIsLoaded(true);
          setUsers(data);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);
  if (error) {
    return 
Error: {error.message}
;
  } else if (!isLoaded) {
    return 
Loading...
;
  } else {
    return (
      

        {users.map((user) => (
          

            {user.name}
          
        ))}
      
    );
  }
};
export default User;

Please indicate how the list of users can be displayed, as no error is given to it

Thanks in advance

Hi,

There is nothing obvious in your code that would cause an error.

Have you ever tried to inspect the console/network tab? These might give you a clue as to what is not working.

Otherwise, if you want to paste your code on GitHub (so I can clone it, run it on my machine, and see what problem you’re having), I don’t mind taking a look.