带有按钮的React本机编辑列表

import React, { useState } from 'react';

const EditableList = () => {
  const [list, setList] = useState([]);

  const addItem = () => {
    setList([...list, 'New Item']);
  };

  const deleteItem = (index) => {
    const updatedList = [...list];
    updatedList.splice(index, 1);
    setList(updatedList);
  };

  const renderList = () => {
    return list.map((item, index) => (
      <div key={index}>
        {item}
        <button onClick={() => deleteItem(index)}>Delete</button>
      </div>
    ));
  };

  return (
    <div>
      {renderList()}
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

export default EditableList;