Добавление и удаления товара по клику на товар React

Рейтинг: 0Ответов: 1Опубликовано: 15.02.2023

Доброе время суток!

подмогите справится, не пойму почему код не работает. нужно по клику добавлять, удалять товар в/из корзины. из дочернего компонента приходит сам item, и выбранный товар checked

   const [checkedItems, setCheckedItems] = useState([]);

const HandleAddItem=(item, checked)=>{ 
        if(checked){     
            if(checkedItems.length){
                setCheckedItems([...checkedItems, item]);   
            }else{                    
                setCheckedItems([...checkedItems, checkedItems.filter(n => n.id === item.id)]);   
            }                
        }
        if(!checked){
            setCheckedItems(checkedItems.filter(n => n.id !== item.id));   
        }             
}
reactjs react-hook
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

function Item(properties) {
  return (
    <div 
      className="item"
      onClick={() => {
        (properties.checked
          ? properties.onUncheck
          : properties.onCheck)();
      }}
    >
      {properties.label} - {properties.checked ? "Checked" : "Unchecked"}
    </div>
  );
}

function Items(properties) {
  return (
    <div className="items">
      {properties.items.map((item) => {
        return (
          <Item
            {...item}
            key={item.key}
            checked={properties.checkedItems.includes(item.key)}
            onCheck={() => properties.onCheckItem(item.key)}
            onUncheck={() => properties.onUncheckItem(item.key)}
          />
        );
      })}
    </div>
  );
}

function Application() {
  const [items, setItems] = React.useState(() => {
    return Array.from({ length: 10 }).map((_, index) => ({
      key: index,
      label: `Item-${index}`,
    }));
  });
  const [checkedItems, setCheckedItems] = React.useState([]);

  function handleCheckItem(item) {
    setCheckedItems((previousState) => {
      return [...previousState, item];
    });
  }

  function handleUncheckItem(item) {
    setCheckedItems((previousState) => {
      return previousState.filter((checkedItem) => {
        return checkedItem !== item;
      });
    });
  }

  return (
    <React.Fragment>
      <Items
        items={items}
        checkedItems={checkedItems}
        onCheckItem={handleCheckItem}
        onUncheckItem={handleUncheckItem}
      />
    </React.Fragment>
  );
}