Simple CRUD application in React

 import React, { useState } from 'react';

function App() {

  // Sample initial data

  const [items, setItems] = useState([

    { id: 1, name: 'Item 1' },

    { id: 2, name: 'Item 2' },

  ]);

  // State to handle input for new items

  const [inputValue, setInputValue] = useState('');

  // State to track the item being edited

  const [editItemId, setEditItemId] = useState(null);

  const [editInputValue, setEditInputValue] = useState('');

  // Create operation: Adding a new item

  const handleAddItem = () => {

    if (inputValue.trim()) {

      const newItem = {

        id: items.length + 1, // Simple id generator

        name: inputValue,

      };

      setItems([...items, newItem]);

      setInputValue(''); // Reset input field

    }

  };

  // Delete operation: Removing an item

  const handleDeleteItem = (id) => {

    const updatedItems = items.filter(item => item.id !== id);

    setItems(updatedItems);

  };

  // Update operation: Editing an item

  const handleEditItem = (id) => {

    const itemToEdit = items.find(item => item.id === id);

    setEditItemId(id);

    setEditInputValue(itemToEdit.name);

  };

  const handleSaveEdit = () => {

    const updatedItems = items.map(item =>

      item.id === editItemId ? { ...item, name: editInputValue } : item

    );

    setItems(updatedItems);

    setEditItemId(null); // Exit edit mode

    setEditInputValue('');

  };

  return (

    <div className="App">

      <h1>Simple CRUD Application</h1>

      {/* Add new item */}

      <div>

        <input

          type="text"

          value={inputValue}

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

          placeholder="Add new item"

        />

        <button onClick={handleAddItem}>Add</button>

      </div>

      {/* Item list */}

      <table border="1" style={{ marginTop: '20px', width: '100%', textAlign: 'left' }}>

        <thead>

          <tr>

            <th>ID</th>

            <th>Name</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          {items.map((item) => (

            <tr key={item.id}>

              <td>{item.id}</td>

              <td>{editItemId === item.id ? (

                <input

                  type="text"

                  value={editInputValue}

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

                />

              ) : (

                item.name

              )}</td>

              <td>

                {editItemId === item.id ? (

                  <button onClick={handleSaveEdit}>Save</button>

                ) : (

                  <>

                    <button onClick={() => handleEditItem(item.id)}>Edit</button>

                    <button onClick={() => handleDeleteItem(item.id)}>Delete</button>

                  </>

                )}

              </td>

            </tr>

          ))}

        </tbody>

      </table>

    </div>

  );

}

export default App;