Scribd
Upload
6 views5 pages

React User Directory App

The document contains a React application that fetches and displays a list of users from an API. It includes functionality for searching users by name and deleting users from the displayed list. The application handles loading states and errors during the fetching process.

Uploaded by

vaish3807
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views5 pages

React User Directory App

The document contains a React application that fetches and displays a list of users from an API. It includes functionality for searching users by name and deleting users from the displayed list. The application handles loading states and errors during the fetching process.

Uploaded by

vaish3807
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

import React, { useEffect, useState } from "react";

import UserList from "./UserList";

function App() {

const [users, setUsers] = useState([]);

const [filteredUsers, setFilteredUsers] = useState([]);

const [searchTerm, setSearchTerm] = useState("");

const [loading, setLoading] = useState(true);

const [error, setError] = useState(false);

const fetchUsers = async () => {

try {

let res = await fetch("[Link]

if (![Link]) throw new Error("Failed to fetch");

let data = await [Link]();

setUsers(data);

setFilteredUsers(data);

setLoading(false);

} catch (err) {

[Link](err);

setError(true);

setLoading(false);

};

useEffect(() => {

fetchUsers();

}, []);
const handleSearch = (e) => {

const term = [Link]();

setSearchTerm(term);

const filtered = [Link]((user) =>

[Link]().includes(term)

);

setFilteredUsers(filtered);

};

const handleDelete = (id) => {

const updated = [Link]((user) => [Link] !== id);

setFilteredUsers(updated);

};

if (loading) return <h2 style={{ textAlign: "center" }}>Loading...</h2>;

if (error) return <h2 style={{ color: "red", textAlign: "center" }}>Error fetching users.</h2>;

return (

<div style={{ padding: "20px", maxWidth: "700px", margin: "auto" }}>

<h1>User Directory</h1>

<input

type="text"

placeholder="Search by name..."

value={searchTerm}

onChange={handleSearch}

style={{

padding: "8px",
marginBottom: "20px",

width: "100%",

fontSize: "16px",

}}

/>

<UserList users={filteredUsers} handleDelete={handleDelete} />

{[Link] === 0 && <p>No users found.</p>}

</div>

);

export default App;

import React from "react";

function UserList({ users, handleDelete }) {

return (

<table

border="1"

style={{

width: "100%",

borderCollapse: "collapse",

textAlign: "left",

fontSize: "16px",

}}

>

<thead>

<tr style={{ background: "#f2f2f2" }}>

<th>Name</th>
<th>Email</th>

<th>City</th>

<th>Action</th>

</tr>

</thead>

<tbody>

{[Link]((user) => (

<tr key={[Link]}>

<td>{[Link]}</td>

<td>{[Link]}</td>

<td>{[Link]}</td>

<td>

<button

onClick={() => handleDelete([Link])}

style={{

backgroundColor: "red",

color: "white",

border: "none",

padding: "6px 12px",

cursor: "pointer",

borderRadius: "4px",

}}

>

Delete

</button>

</td>

</tr>

))}
</tbody>

</table>

);

export default UserList;

You might also like