React 19 Tutorial in Hindi #63 Populate Data in input fields with API

Get Id from URL

Call API for single user data

Define state for api data

Populate data in input fields

Interview Questions

import { useEffect, useState } from "react";

import { useParams } from "react-router";

function UserEdit() {

const {id}=useParams();

const [name, setName] = useState('')

const [age, setAge] = useState('')

const [email, setEmail] = useState('')

useEffect(()=>{

getUserData()

},[])

const getUserData=async()=>{

const url ="http://localhost:3000/users/"+id;

let response = await fetch(url);

response =await response.json();

setName(response.name)

setEmail(response.email)

setAge(response.age)

}

return (

<h1>Edit User Details</h1>

<button >Update User</button>

</div>

)

}

export default UserEdit;

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>

<li>

</li>

</ul>

{/* <h1>Make Routes and Pages for Add User and User List UI</h1> */}

</Routes>