React Js Change objects position in array

React Js Change objects position in array:In React.js, changing the position of objects in an array involves swapping elements one step up or down. To achieve this, you can use array destructuring and the useState hook to manage the array state. For moving an object up, swap it with the element before it; for moving down, swap it with the element after it. Update the state with the modified array.

written

reviewed

updated

How to change object positions in a Reactjs array?

This React.js code defines a simple web application that allows users to change the position of objects in an array. It uses the useState hook to manage a state variable called "items," which is an array of objects. The "moveUp" and "moveDown" functions enable users to shift items in the array one position up or down by cloning the array, swapping the selected item with the adjacent one, and updating the state accordingly. The rendered interface displays the items in a list with "Move Up" and "Move Down" buttons, which are disabled when an item is at the top or bottom of the list, respectively.

React Js Change objects position in array Example

  <script type="text/babel">
    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>

Run

Output of React Js Change objects position in array

Pasted Image

React JS Tutorial

React Js Change objects position in array

Feedback for Abhishek

How to change object positions in a Reactjs array?

React Js Change objects position in array Example

Output of React Js Change objects position in array