0

Estoy haciendo un proyecto donde tengo que crear una especie de ecommerce. La idea es que cuando un producto se quede sin stock, el botón para comprar ese producto cambie de color y se deshabilite. Usé un condicional dentro de Styled Component para que, cuando el botón esté deshabilitado, cambie el color, pero al hacer esto todos los botones cambian.

¿Cómo puedo hacer que los estilos solo afecten al botón que queda deshabilitado?

Este sería mi código

import React, {
  useState
} from 'react';
import {
  Div,
  H2,
  P,
  DivPosition,
  StockP
} from "./style/ProductStyle";
import styled from 'styled-components';

const ButtonC = styled.button `
border: none;
padding: 1.5rem 2.5rem;
border-radius: 0.4rem;
color: white;
background-color: ${(props) => (!props.disabled ? "red": "blue")};
`;
let deshabilitar = false;
console.log(deshabilitar);

export default function Product({
  product,
  setComprados
}) {
  const [producto, setProducto] = useState(product.stock);
  const [comprarBtn, setComprarBtn] = useState("Comprar")



  const comprar = () => {
    if (producto >= 1) {
      setProducto(prevProducto => prevProducto > 1 ? prevProducto - 1 : "agotado");
      if (producto === 1) {
        setComprarBtn(() => "Sin stock");
        deshabilitar = true;
      }
      setComprados(prevComprados => prevComprados + 1);
      console.log(producto);
    }

  }
  return ( <
    Div key = {
      product.id
    }
    className = "productCard" >
    <
    H2 > {
      product.producto.nombre
    } < /H2> <
    P > {
      product.producto.descripcion
    } < /P> <
    DivPosition >
    <
    StockP > En stock: < span > {
      producto
    } < /span></StockP >
    <
    ButtonC onClick = {
      () => comprar()
    }
    disabled = {
      deshabilitar
    } > {
      comprarBtn
    } < /ButtonC>   < /
    DivPosition > <
    /Div>
  )
}

1 respuesta 1

1

Puedes añadirle el atributo style al botón con un condiciónal.

 <ButtonC onClick = {() =>comprar()} disabled = {deshabilitar} style={{backgroundColor: deshabilitar ? "red" : "blue"}}>{comprarBtn}</ButtonC>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.