import React, { useState } from 'react';

const ItemsList = ({items, removeItem, updateItem}) => {

  const handleChange = (e) => {
    e.preventDefault();

  }
  return (
        <ul>
        {
          items.map((item, index) => 
            <li key={index}>
                    <input type="text" value={item.name} onChange={(e) => {updateItem(index, {name: e.target.value})} }/>
                    <input type="number" value={item.cost} onChange={(e) => {updateItem(index, {cost: e.target.value})}}/>
                    <input type="number" value={item.quantity} onChange={(e) => {updateItem(index, {quantity: e.target.value})}}/>
                  <button onClick={() => removeItem(index)}>Supprimer</button>
            </li> 
          ) 
        }
        </ul>)
}

export default ItemsList;