14b

src/
├── App.js
├── components/
│   ├── UserList.js
│   ├── AddUser.js
│   ├── EditUser.js
└── services/
    └── api.js

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:5000/api/users" // adjust to your backend
});


#install
npx create-react-app user-management
cd user-management
npm install axios react-router-dom

#app.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import UserList from './components/UserList';
import AddUser from './components/AddUser';
import EditUser from './components/EditUser';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Users</Link> | <Link to="/add">Add User</Link>
      </nav>
      <Routes>
        <Route path="/" element={<UserList />} />
        <Route path="/add" element={<AddUser />} />
        <Route path="/edit/:id" element={<EditUser />} />
      </Routes>
    </Router>
  );
}

export default App;

userList.js

import React, { useEffect, useState } from 'react';
import axios from '../services/api';
import { Link } from 'react-router-dom';

function UserList() {
  const [users, setUsers] = useState({});

  useEffect(() => {
    axios.get('/').then((res) => {
      setUsers(res.data || {});
    });
  }, []);

  const deleteUser = (id) => {
    axios.delete(`/${id}`).then(() => {
      const updated = { ...users };
      delete updated[id];
      setUsers(updated);
    });
  };

  return (
    <div>
      <h2>Users</h2>
      {Object.entries(users).map(([id, user]) => (
        <div key={id}>
          <p>{user.name} - {user.email}</p>
          <Link to={`/edit/${id}`}>Edit</Link>
          <button onClick={() => deleteUser(id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default UserList;

#AddUser.js

import React, { useState } from 'react';
import axios from '../services/api';
import { useNavigate } from 'react-router-dom';

function AddUser() {
  const [user, setUser] = useState({ name: '', email: '' });
  const navigate = useNavigate();

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const addUser = () => {
    axios.post('/', user).then(() => {
      navigate('/');
    });
  };

  return (
    <div>
      <h2>Add User</h2>
      <input name="name" value={user.name} onChange={handleChange} placeholder="Name" />
      <input name="email" value={user.email} onChange={handleChange} placeholder="Email" />
      <button onClick={addUser}>Add</button>
    </div>
  );
}

export default AddUser;

#EditUser.js

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from '../services/api';

function EditUser() {
  const { id } = useParams();
  const [user, setUser] = useState({ name: '', email: '' });
  const navigate = useNavigate();

  useEffect(() => {
    axios.get(`/${id}`).then((res) => {
      setUser(res.data);
    });
  }, [id]);

  const updateUser = () => {
    axios.put(`/${id}`, user).then(() => {
      navigate('/');
    });
  };

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <h2>Edit User</h2>
      <input name="name" value={user.name} onChange={handleChange} />
      <input name="email" value={user.email} onChange={handleChange} />
      <button onClick={updateUser}>Update</button>
    </div>
  );
}

export default EditUser;

#install
npm install
npm start