Как найти решение для изменения цвета товара после его добавления в корзину?

Question

У меня возникли проблемы при попытке изменить цвет предмета после добавления его в корзину. Вот мои функции по добавлению корзины:

function addToCart(newItem) { 
        cartItems.map(item => newItem.type === item.type && removeFromCart(item)) 
        setCartItems(prevItems => [...prevItems, newItem])
    }

function removeFromCart(itemToRemove) { 
    setCartItems(prevItems => prevItems.filter(item => 
       `${item.id}-${item.type}` !== `${itemToRemove.id}-${itemToRemove.type}`)) 
    }

У меня есть компонент «Option», который внутри него будет отображать каждый сервис:

const serviceElements = servicesList.map(service => 
          <Service key={service.id} 
                   id={service.id} 
                   name={service.name} 
                   type={service.type} 
           /> )

     return (
        <div className={`Options-${context.theme}`}>
            <ul>
                {serviceElements}
            </ul>
        </div>
    )

И это «Сервис» компонент:

<>
      <li onClick={() => { context.cartItems.includes(props) 
                           ? context.removeFromCart(props) 
                           : context.addToCart(props)}}>
                {props.name}
      </li>
</>

Я попытался добавить класс к компоненту «Служба», но все элементы в отображаемом списке изменятся, а не только тот, который я должен изменить:

<>
      <li 
          className={context.cartItems.includes(props) ? "notInCart" : "inCart"}  
          onClick={() => { context.cartItems.includes(props) 
                          ? context.removeFromCart(props) 
                          : context.addToCart(props)}}>
                {props.name}
      </li>
</>

Я испробовал оба эти стиля в моем файле css:

.Options-light {
  @extend .TimeGrid-light;
  ul {
    .inCart {
      background-color: blue;
    }
    .notInCart {
      background-color: red;
    }
  }
}

//as well as

.Options-light {
  @extend .TimeGrid-light;
  .inCart {
    background-color: blue;
  }
  .notInCart {
    background-color: red;
  }
}

У меня проблемы с определением, где именно моя проблема

Answer 1

Для этого вам нужно состояние .

class Service extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.addToCart = this.addToCart.bind(this);
    this.state = {
      active: false
    };
  }

  addToCart(context) {
    if (context.cartItems.includes(this.props) {
        context.removeFromCart(this.props);
    } else {
        context.addToCart(this.props);
    }

    this.setState({
      active: !this.state.active
    });
  }

  render({ context }) {
    return (
      <>
        <li className={this.state.active ? "notInCart" : "inCart"} onClick={() => this.addToCart(context)}>
          {props.name}
        </li>
      </>
    )
  }
}