React 19 Tutorial in Hindi #62 Make Page for Edit user details

Add Edit Button

Define Edit Page Route

Make Edit Page

Navigation to Edit Page

Define Input fields

Interview Questions

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 { 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>
)
}




function UserEdit() {
return (
<div style={{ textAlign: 'center' }}>
<h1>Edit User Details</h1>
<input type="text" placeholder="user name" />
<br /><br />
<input type="text" placeholder="user email" />
<br /><br />
<input type="text" placeholder="user age" />
<br /><br />
<button >Update User</button>
</div>
)
}

export default UserEdit;