REACT CRUD App

npx create-react-app crud-app
cd crud-app
npm start

Try It Now

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

function App() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState("");
  const [editingId, setEditingId] = useState(null);
  const [updatedName, setUpdatedName] = useState("");

  // Add User
  const addUser = () => {
    if (name.trim()) {
      setUsers([...users, { id: uuidv4(), name }]);
      setName("");
    }
  };

  // Delete User
  const deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  // Start Editing
  const startEditing = (id, name) => {
    setEditingId(id);
    setUpdatedName(name);
  };

  // Update User
  const updateUser = () => {
    setUsers(
      users.map((user) =>
        user.id === editingId ? { ...user, name: updatedName } : user
      )
    );
    setEditingId(null);
    setUpdatedName("");
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>React CRUD App</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name..."
      />
      <button onClick={addUser}>Add</button>

      <ul style={{ listStyle: "none", padding: 0 }}>
        {users.map((user) => (
          <li key={user.id}>
            {editingId === user.id ? (
              <>
                <input
                  type="text"
                  value={updatedName}
                  onChange={(e) => setUpdatedName(e.target.value)}
                />
                <button onClick={updateUser}>Save</button>
              </>
            ) : (
              <>
                {user.name}
                <button onClick={() => startEditing(user.id, user.name)}>✏️ Edit</button>
                <button onClick={() => deleteUser(user.id)}>❌ Delete</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Try It Now