React 19 Tutorial #59 Routes and Pages for User list and Add User UI

Make BrowserRouter wrapper around the app

Make Routes

Make components

Make links

Test link, routes and screens

Interview Questions


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router'

createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)



import { NavLink, Route, Routes } from 'react-router'
import './App.css'
import UserAdd from './UserAdd'
import UserList from './UserList'
import UserEdit from './UserEdit'
export default function App() {


return (
<div>
<ul className='nav-list'>
<li>
<NavLink to="/">List</NavLink>
</li>
<li><NavLink to="/add">Add User</NavLink></li>
</ul>
{/* <h1>Make Routes and Pages for Add User and User List UI</h1> */}
<Routes >
<Route path="/" element={<UserList />} />
<Route path="/add" element={<UserAdd />} />
<Route path="/edit/:id" element={<UserEdit />} />


</Routes>
</div>
)
}


import { useEffect, useState } from "react";
import { useNavigate } from "react-router";

export default function UserList() {

const [userData,setUserData]=useState([])
const [loading,setLoading]=useState(false)
const navigate = useNavigate();
const url="http://localhost:3000/users";
useEffect(()=>{
setLoading(true)
getUserData();
},[])

const getUserData = async()=>{
let response = await fetch(url);
response = await response.json();
console.log(response);
setUserData(response)
setLoading(false)
}
const deleteUser= async(id)=>{
let response = await fetch(url+"/"+id,{
method:'delete'
})
response = await response.json();
if(response){
alert("record deleted")
getUserData()
}

}

const editUser=(id)=>{
navigate("/edit/"+id)
}


return (
<div>
<ul className="user-list user-list-head">
<li>Name</li>
<li>Age</li>
<li>Email</li>
<li>Action</li>
</ul>
{
!loading?
userData.map((user)=>(
<ul key={user.name} className="user-list">
<li>{user.name}</li>
<li>{user.age}</li>
<li>{user.email}</li>
<li>
<button onClick={()=>deleteUser(user.id)} >Delete</button>
<button onClick={()=>editUser(user.id)} >Edit</button>
</li>
</ul>
))
:<h1>Data Loading...</h1>
}
</div>
)
}



import { useState } from "react"

function UserAdd() {
const [name, setName] = useState('')
const [age, setAge] = useState('')
const [email, setEmail] = useState('')

const createUser = async () => {
console.log(name, age, email);
const url = "http://localhost:3000/users";
let response = await fetch(url, {
method: 'Post',
body: JSON.stringify({ name, email, age })
});
response = await response.json();
if (response) {
alert("new user added")
}


}
return (
<div style={{ textAlign: "center" }}>
<h1>Add New User</h1>
<input type="text"
onChange={(event) => setName(event.target.value)} placeholder="enter name" />
<br /><br />
<input type="text"
onChange={(event) => setAge(event.target.value)}
placeholder="enter age" />
<br /><br />
<input type="text"
onChange={(event) => setEmail(event.target.value)}
placeholder="enter email" />
<br /><br />
<button onClick={createUser} >Add User</button>
</div>
)
}

export default UserAdd


.user-list{
display: flex;
justify-content: space-around;
border: 1px solid #aaa;
margin: 0;
padding: 10px;
list-style: none;
}
.user-list-head{
font-size: 20px;
font-weight: 800;
}
.nav-list{
display: flex;
width: 400px;
justify-content: space-around;
list-style: none;
}