import React, { useState } from "react"; function arraymove(arr, fromIndex, toIndex) { const arrCopy = [...arr]; var element = arrCopy[fromIndex]; arrCopy.splice(fromIndex, 1); arrCopy.splice(toIndex, 0, element); return arrCopy; } export default function App() { const [components, setComponents] = useState([]); function MoveUp(index) { if (index === 0) return; const updatedArray = arraymove(components, index, index - 1); setComponents(updatedArray); } function MoveDown(index) { if (index === components.length - 1) return; const updatedArray = arraymove(components, index, index + 1); setComponents(updatedArray); } const MovableComponent = (props) => ( <> <div>{props.id}</div> <button onClick={() => MoveUp(props.index)}> Move Up </button> <button onClick={() => MoveDown(props.index)}> Move Down </button> <br /> <br /> </> ); return ( <div className="App"> {components.map(({ id }, index) => ( <MovableComponent key={index} id={id} index={index} /> ))} <button onClick={() => { setComponents((prev) => [ ...prev, { id: `component #${components.length}` } ]); }} > Add </button> </div> ); }

codigosandbox