React Js Change objects position in array

    const { useState } = React;

​

    function App() {

      // Sample state with an array of objects

    const [items, setItems] = useState([

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

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

        { id: 3, name: 'Keyboard' },

        { id: 4, name: 'Monitor' },

        { id: 5, name: 'Headphones' },

        { id: 6, name: 'Speakers' },

        // Add more items here

      ]);

​

​

      // Function to move an item one position up

      const moveUp = (index) => {

        if (index > 0) {

          // Clone the original array

          const clonedItems = [...items];

​

          // Swap the item with the one before it

          const temp = clonedItems[index - 1];

          clonedItems[index - 1] = clonedItems[index];

          clonedItems[index] = temp;

​

          // Update the state with the modified array

          setItems(clonedItems);

        }

      };

​

      // Function to move an item one position down

      const moveDown = (index) => {

        if (index < items.length - 1) {

          // Clone the original array

          const clonedItems = [...items];

​

          // Swap the item with the one after it

          const temp = clonedItems[index + 1];

          clonedItems[index + 1] = clonedItems[index];

          clonedItems[index] = temp;

​

          // Update the state with the modified array

          setItems(clonedItems);

        }

      };

​

      return (

        <div className='container'>

          <h3 className='title'>React Js Change objects position in array</h3>

          <ul>

            {items.map((item, index) => (

              <li key={item.id} className='list-item'>

                {item.name}

                <button

                  className='move-up-button'

                  onClick={() => moveUp(index)}

                  disabled={index === 0} // Disable if it's the first item

                >

                  Move Up

                </button>

                <button

                  className='move-down-button'

                  onClick={() => moveDown(index)}

                  disabled={index === items.length - 1} // Disable if it's the last item

                >

                  Move Down

                </button>

              </li>

            ))}

          </ul>

        </div>

      );

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>