REACT CRUD App

A simple React CRUD (Create, Read, Update, Delete) App using functional components and React Hooks.

Steps to Set Up

Create a new React app

npx create-react-app crud-app

cd crud-app

npm start

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

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

Code for `src/App.js`

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 (

<h1>React CRUD App</h1>

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

placeholder="Enter name..."

{users.map((user) => (

{editingId === user.id ? (

<input

type="text"

value={updatedName}

onChange={(e) => setUpdatedName(e.target.value)}

</>

) : (

{user.name}

<button onClick={() => startEditing(user.id, user.name)}>

Edit</button>

<button onClick={() => deleteUser(user.id)}>

Delete</button>

</>

)}

</li>

))}

</ul>

</div>

);

}

export default App;

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;

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;

Features

Add Users
Read Users (List all users)
Update Users (Edit & Save Changes)
Delete Users

Optional Enhancements

Style it with CSS, Tailwind CSS, or Bootstrap.
Use localStorage to save data persistently.
Implement a backend (Node.js, Firebase, etc.) for database storage.

Steps to Set Up

Code for src/App.js

Features

Optional Enhancements

Code for `src/App.js`