Simple React CRUD Application Using LocalStorage

Here's a simple example of a React CRUD (Create, Read, Update, Delete) operation without a database, using localStorage to persist data.

1. Setting Up the Project

First, create a new React project if you don't have one:

npx create-react-app react-crud-localstorage
cd react-crud-localstorage

Then open this project in VS code

2. Creating the Component

We'll create a CrudApp component that handles CRUD operations.

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


function CrudApp() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');
  const [editingItem, setEditingItem] = useState(null);
  const [editingText, setEditingText] = useState('');


  useEffect(() => {
    const storedItems = JSON.parse(localStorage.getItem('items'));
    if (storedItems) {
      setItems(storedItems);
    }
  }, []);


  useEffect(() => {
    localStorage.setItem('items', JSON.stringify(items));
  }, [items]);


  const addItem = () => {
    if (newItem.trim()) {
      setItems([...items, { id: Date.now(), text: newItem }]);
      setNewItem('');
    }
  };


  const deleteItem = (id) => {
    setItems(items.filter(item => item.id !== id));
  };


  const startEditing = (item) => {
    setEditingItem(item);
    setEditingText(item.text);
  };


  const saveEdit = () => {
    setItems(
      items.map(item =>
        item.id === editingItem.id ? { ...item, text: editingText } : item
      )
    );
    setEditingItem(null);
    setEditingText('');
  };


  return (
    <div>
      <h1>React CRUD with LocalStorage</h1>


      <div>
        <input
          type="text"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          placeholder="Add new item"
        />
        <button onClick={addItem}>Add</button>
      </div>


      <ul>
        {items.map(item => (
          <li key={item.id}>
            {editingItem && editingItem.id === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingText}
                  onChange={(e) => setEditingText(e.target.value)}
                />
                <button onClick={saveEdit}>Save</button>
              </div>
            ) : (
              <div>
                {item.text}
                <button onClick={() => startEditing(item)}>Edit</button>
                <button onClick={() => deleteItem(item.id)}>Delete</button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}


export default CrudApp;

3. Using the Component

You can use the CrudApp component in your App.js file.

import React from 'react';
import CrudApp from './CrudApp';


function App() {
  return (
    <div className="App">
      <CrudApp />
    </div>
  );
}


export default App;

4. Explanation

• State Management: The component manages three pieces of state: items (list of all items), newItem (text for new item input), and editingItem (currently edited item).
• CRUD Operations:
• Create: Add new items to the list.
• Read: Display all items.
• Update: Edit an existing item.
• Delete: Remove an item from the list.
• LocalStorage: The useEffect hook is used to load the items from localStorage when the component mounts and to save them whenever items changes.

5. Running the Project

Start the React app:

npm start

You now have a basic React CRUD application using localStorage to persist data!

Increase The Profitability, Availability Of Your Business

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.