I am creating an app that consume rest api and display the results, after completing the
app and i ran the build it shows blank screen see the code below
import React from "react";
import Home from "./webpages/Home";
function App() {
return (
<div>
<Home />
</div>
);
}
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 (
<Router>
<Routes>
<Route path="/" exact component={User} />
<Route path="/user/:id" component={UserDetail} />
</Routes>
</Router>
);
};
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 <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{users.map((user) => (
<li>
<Link to={`user/${user.id}`}>{user.name}</Link>
</li>
))}
</ul>
);
}
};
export default User;
Kindly advise on how the list of users can be displayed, since it is not given any error
Thanks in advance
