Basic CRUD Application

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

const App = () => {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState({ name: '', description: '' });
  const [editItem, setEditItem] = useState(null);

  // Fetch all items when the component is mounted
  useEffect(() => {
    axios.get('http://localhost:5000/items')
      .then(response => {
        setItems(response.data);
      })
      .catch(error => {
        console.error('Error fetching items:', error);
      });
  }, []);

  // Handle form input changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setNewItem((prevState) => ({ ...prevState, [name]: value }));
  };

  // Add a new item
  const addItem = () => {
    axios.post('http://localhost:5000/items', newItem)
      .then(response => {
        setItems([...items, response.data]);
        setNewItem({ name: '', description: '' });
      })
      .catch(error => {
        console.error('Error adding item:', error);
      });
  };

  // Edit an item
  const startEdit = (item) => {
    setEditItem(item);
  };

  // Save edited item
  const saveEdit = () => {
    axios.put(`http://localhost:5000/items/${editItem.id}`, editItem)
      .then(response => {
        const updatedItems = items.map(item => 
          item.id === editItem.id ? response.data : item
        );
        setItems(updatedItems);
        setEditItem(null);
      })
      .catch(error => {
        console.error('Error updating item:', error);
      });
  };

  // Delete an item
  const deleteItem = (id) => {
    axios.delete(`http://localhost:5000/items/${id}`)
      .then(() => {
        setItems(items.filter(item => item.id !== id));
      })
      .catch(error => {
        console.error('Error deleting item:', error);
      });
  };

  return (
    <div>
      <h1>CRUD Application</h1>
      
      <h2>Items</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {editItem?.id === item.id ? (
              <div>
                <input
                  name="name"
                  value={editItem.name}
                  onChange={(e) =>
                    setEditItem({ ...editItem, name: e.target.value })
                  }
                />
                <input
                  name="description"
                  value={editItem.description}
                  onChange={(e) =>
                    setEditItem({ ...editItem, description: e.target.value })
                  }
                />
                <button onClick={saveEdit}>Save</button>
                <button onClick={() => setEditItem(null)}>Cancel</button>
              </div>
            ) : (
              <div>
                {item.name} - {item.description}
                <button onClick={() => startEdit(item)}>Edit</button>
                <button onClick={() => deleteItem(item.id)}>Delete</button>
              </div>
            )}
          </li>
        ))}
      </ul>

      <h2>Add New Item</h2>
      <input
        name="name"
        value={newItem.name}
        onChange={handleChange}
        placeholder="Item Name"
      />
      <input
        name="description"
        value={newItem.description}
        onChange={handleChange}
        placeholder="Item Description"
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

export default App;