I have a simple project.

I want to move components up and down with buttons. How can I do that?

for example; https://codesandbox.io/s/epic-water-k1m4fg

CodePudding user response：

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>
  );
}

Codesandbox