オブジェクトが格納された配列の内、ボタンを押すことで任意のオブジェクトを配列の中で１つ前または１つ後ろに移動させたい


[demo](https://codesandbox.io/embed/wispy-
fog-9eu15?fontsize=14&hidenavigation=1&theme=dark)  
↑  
追加、削除、値の編集が可能な配列があります。  
React.jsで実装しています。

Upボタンを押下で1つ前に、Downボタンを押下で1つ後ろに移動させたいです。  
例えばリストが下記になっている場合、

[code]

    ・hoge
    ・fuga
    
[/code]

fugaのUpボタン押下で下記の並び順に変更したいです。

[code]

    ・fuga
    ・hoge
    
[/code]

* * *

コードは下記の通りです。

[code]

    const rowdefaultItem = {
      id: short.generate() // uuid生成,
      name: ""
    };
    const [items, setItems] = useState([defaultItem]);
    const addItem = () => {
      if (items.length < 5) setItems([...items, defaultItem]);
    };
    const deleteItem = (e) => {
      const itemId = e.currentTarget.id;
      const newItems = items.filter((item) => item.id !== itemId);
      setItems(newItems);
    };
    
    const changeRow = (e) => {
      const selectItem = e.currentTarget;
      const method = selectItem.name;
      if (method === "up") {
        // 1つ前に移動
      } else if (method === "down") {
        // 1つ後に移動
      }
    };
    
    const list = items.map((item) => (
      <li key={item.id}>
        <dl>
          <dt>Name</dt>
          <dd>
            <input type="text" defaultValue={item.name} />
          </dd>
        </dl>
        <div>
          <button onClick={changeRow} name="up" id={item.id}>
            Up
          </button>
          <button onClick={changeRow} name="up" id={item.id}>
            Down
          </button>
        </div>
        <button onClick={deleteItem} id={item.id}>
          Delete
        </button>
      </li>
    ));
    
    return (
      <>
        <p>{items.length} / 5</p>
        <button onClick={addItem}>Add</button>
        <ul>{list}</ul>
      </>
    );
    
[/code]

* * *

「javascript 配列
並び変え」でググってみたのですが、昇順や降順で並び替えする、といったリスト全体の並び替え方法しか見つけられることができなかったため、質問する次第です。




検索した「並び替え」だと「ソート」になってしまうので、今回のような場合は「配列 操作」などで検索するとよさそうです。

* * *

例えば `splice()` メソッドを使うことで、配列中のインデックスと削除 (または追加) したい要素を指定して配列を操作することが可能です。

**参考:**

  * [Array.prototype.splice()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
  * [配列操作(追加, 削除, filter, map, reduceなど)](https://www.wakuwakubank.com/posts/280-javascript-array-helper/)




検索した「並び替え」だと「ソート」になってしまうので、今回のような場合は「配列 操作」などで検索するとよさそうです。

* * *

例えば `splice()` メソッドを使うことで、配列中のインデックスと削除 (または追加) したい要素を指定して配列を操作することが可能です。

**参考:**

  * [Array.prototype.splice()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
  * [配列操作(追加, 削除, filter, map, reduceなど)](https://www.wakuwakubank.com/posts/280-javascript-array-helper/)

