Unveränderliche React-State-Aktualisierungen mit ECMAScript 2023 Array-Methoden

import React, { useState } from 'react';
 
export function TodoListManager({ initialItems }) {
  const [items, setItems] = useState(initialItems);
 
  const removeItemByIndex = (index) => {
    setItems((prev) => prev.toSpliced(index, 1));
  };
 
  const sortItemsByName = () => {
    setItems((prev) => prev.toSorted((a, b) => a.text.localeCompare(b.text)));
  };
 
  return (
    <div>
      <button onClick={sortItemsByName}>Sort Alphabetically</button>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            {item.text}
            <button onClick={() => removeItemByIndex(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}