0
136
Viewstoggling styles of multiple buttons onclick in react
hi everyone I'm building my first e-commerce store and ran into an issue, my site is selling shoes.
but when I click on the button I want to be able to change the color of the selected button I should only be able to select one button as you cant have two sizes per shoe.
here is the component containing the shoe card:
import React from "react";
const ShoeProductCard = ({ productData }) => {
const sizes = [7, 8, 9, 10];
return productData.map((product) => {
return (
<div key={product.id} className="productsGrid">
<div key={product.id} className="container">
<div
key={product.id}
style={{ backgroundColor: product.color }}
className="card"
>
<div key={product.id} className="imgBx">
<img key={product.id} src={product.img} alt="shoes" />
</div>
<div className="contentBx">
<h2>{product.title}</h2>
<div className="size">
<h3>Size :</h3>
{sizes.map((size) => (
<span key={size} >{size}</span>
))}
</div>
<a href="#" alt="logo">
{" "}
<i className="fa-solid fa-cart-arrow-down"></i>
</a>
<br />
<span className="price">Price: {product.price}</span>
<br />
<i
style={{ color: "white", cursor: "pointer" }}
className="fa-solid fa-circle-info"
></i>
</div>
</div>
</div>
</div>
);
});
};
export default ShoeProductCard;
now what I tried was giving my styles a state of true and false and conditionally reading it with my class in the component inline. but that didn't work it just erased the entire page.
1 answers
Answer question0
This is how I would do it. Have a state variable storing the selected shoe size, which changes when a new size button is clicked.
import React, { useState } from "react";
const ShoeProductCard = () => {
const sizes = [7, 8, 9, 10];
const [selectedSize, setSelectedSize] = useState("");
// dummy data
let productData = [{ id: 1, img: "imgSrc", title: "Yeezy 350s", price: 780 }];
return productData.map((product) => {
return (
<div key={product.id} className="productsGrid">
<div key={product.id} className="container">
<div
key={product.id}
style={{ backgroundColor: product.color }}
className="card"
>
<div key={product.id} className="imgBx">
<img key={product.id} src={product.img} alt="shoes" />
</div>
<div className="contentBx">
<h2>{product.title}</h2>
<div className="size">
<h3>Size :</h3>
{sizes.map((size) => (
<button
onClick={() => setSelectedSize(size)}
style={{
backgroundColor: selectedSize === size ? "grey" : "white",
}}
key={size}
>
{size}
</button>
))}
</div>
<a href="#" alt="logo">
{" "}
<i className="fa-solid fa-cart-arrow-down"></i>
</a>
<br />
<span className="price">Price: {product.price}</span>
<br />
<i
style={{ color: "white", cursor: "pointer" }}
className="fa-solid fa-circle-info"
></i>
</div>
</div>
</div>
</div>
);
});
};
export default ShoeProductCard;
Basically, I've changed your spans to buttons which are mapped from the array of sizes.
backgroundColor: selectedSize === size ? "grey" : "white",
This here just changes the color of the buttons, if the size has been selected it's grey, if not it's white. Just change accordingly. You may have to set your buttons to display: block to style them how you want.