⚛️ Simple CRUD UI in React
Now you learn how real apps work.
👉 CRUD = Create, Read, Update, Delete
Every real application uses CRUD.
Examples
• Add task → Create
• View tasks → Read
• Edit task → Update
• Delete task → Delete
🔹 What is CRUD in React
CRUD means managing data using UI.
React handles CRUD using:
✅ State
✅ Events
✅ Components
🧠 Why CRUD is Important
• Used in dashboards
• Used in admin panels
• Used in e-commerce apps
• Top interview question
If you know CRUD → you can build real apps.
🧩 Example Project: Todo List CRUD
We will build:
✔ Add item
✔ Show item
✔ Delete item
✔ Update item
✍️ Step 1: Setup State
State stores list data.
import { useState } from "react";
function App() {
const [items, setItems] = useState([]);
return <div></div>;
}
export default App;
✔ items → list data
✔ setItems() → update list
➕ Step 2: Create (Add Item)
Add new item to list.
const [input, setInput] = useState("");
const addItem = () => {
setItems([...items, input]);
setInput("");
};
UI
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={addItem}>Add</button>
👀 Step 3: Read (Show Items)
Display list using map.
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
❌ Step 4: Delete Item
Remove item from list.
const deleteItem = (index) => {
const newItems = items.filter((_, i) => i !== index);
setItems(newItems);
};
UI
<button onClick={() => deleteItem(index)}>Delete</button>
✏️ Step 5: Update Item (Edit)
Update existing data.
const updateItem = (index) => {
const newValue = prompt("Update item");
const updated = [...items];
updated[index] = newValue;
setItems(updated);
};
UI
<button onClick={() => updateItem(index)}>Edit</button>
✅ Complete CRUD UI Example
import { useState } from "react";
function App() {
const [items, setItems] = useState([]);
const [input, setInput] = useState("");
const addItem = () => {
if (!input) return;
setItems([...items, input]);
setInput("");
};
const deleteItem = (index) => {
setItems(items.filter((_, i) => i !== index));
};
const updateItem = (index) => {
const newValue = prompt("Update item");
if (!newValue) return;
const updated = [...items];
updated[index] = newValue;
setItems(updated);
};
return (
<div>
<h2>Todo CRUD</h2>
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={addItem}>Add</button>
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => updateItem(index)}>Edit</button>
<button onClick={() => deleteItem(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default App;
🧠 How CRUD Works Internally
• User action → event triggers
• State updates
• React re-renders UI
This is React’s core workflow.
⚠️ Common Beginner Mistakes
• Mutating state directly
• Forgetting key in list
• Not copying arrays before update
• Confusing state updates
🧪 Mini Practice Task
• Build a simple student list CRUD
• Add student name
• Edit student name
• Delete student
• Show total count
✅ Double Tap ♥️ For More