React js , wanted to show the animation only on the added item "add to bag ' button

I wanted to only show the animation in the "add to bag button only added item, but when I click the add to bag button all the other buttons also display the animation but I wanted to just display the button animation only on the clicked button. Can anyone help me?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<Table responsive>
<thead>
<tr>
<th>
<p
className="p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
SM
</p>
</th>
{attributelist.map((attribute) => (
<th key={variation.Name}>
<p
className="ml=5 p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
{attribute.Name}
</p>
</th>
))}
<th>
<p
className="ml=5 p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
Price
</p>
</th>
<th className="text-center" />
</tr>
</thead>
{variation.map((variations) => (
<tbody key={variations.ID}>
<tr>
<td className="text-dark">{variations.VariationSKU}</td>
{variations.Attributes.map((attribute) => (
<td key={attribute.ID} className="text-dark">
{attribute.Value}
</td>
))}
<td className="text-dark">
{`RM${variations.Price.toFixed(2)}`}
</td>
<td>
<Button
id="Sproduct-btn"
className={`btn add-to-cart w-100 ${
addedId === variations.ID ? submitResponse.class : ""
}`}
data-toggle="tooltip"
type="button"
tag={!user ? Link : "a"}
to={!user ? "/login" : ""}
disabled={
submitResponse.openState ||
Status === "Inactive" ||
variationStatus === "Inactive" ||
Stock === 0 ||
variationStock === 0
}
style={{ fontSize: "15px", width: "30%" }}
{...(user && {
onClick: () =>
onSubmit(
setAddedId(variations.ID),
setResponse(addToCart(productid, variations.ID))
),
})}
>
<div className="cart">
<div>
<div />
<div />
</div>
</div>
<div className="dots" />
{/* {variationStock === 0 || data.data.Stock === 0 ? (
<div className="pl-2 default">SOLD OUT</div>
) : (
<span className="pl-2 default">ADD TO BAG</span>
)} */}
<span className="pl-2 default">{result}</span>
<div className="success">ADDED</div>
<div className="failed">
FAILED TO ADDED, PLEASE TRY AGAIN
</div>
</Button>
</td>
</tr>
</tbody>
))}
</Table>

<!-- end snippet -->

above is my button code in the table

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 const [submitResponse, setSubmitResponse] = useState({
class: "",
openState: false,
});
const [response, setResponse] = useState();
const [addedId, setAddedId] = useState();
const onSubmit = () => {
response
.then(() => {
// if success add to cart, process success animation
setSubmitResponse({
class: "added",
openState: true,
});
setTimeout(() => {
setSubmitResponse({
class: "added txtState",
openState: true,
});
}, 10);
setTimeout(() => {
setSubmitResponse({
class: "added",
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() => {
setSubmitResponse({
class: "",
openState: false,
});
}, 3500);
})
.catch(() => {
// if failed add to cart, process danger animation
setSubmitResponse({
class: "danger",
openState: true,
});
setTimeout(() => {
setSubmitResponse({
class: "danger txtState",
openState: true,
});
}, 10);
setTimeout(() => {
setSubmitResponse({
class: "danger",
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() => {
setSubmitResponse({
class: "",
openState: false,
});
}, 3500);
});
};

<!-- end snippet -->

above is my onSubmit ,function for animation display after item added

you set animation class to all button's in map :

className={`btn add-to-cart w-100 ${submitResponse.class}`}

you need use conditional statement to check which Button clicked. for example, you can define a state and set it added variations.ID.

className={'btn add-to-cart w-100 '+((addedId===variations.ID)?(submitResponse.class):'')}

New Update :

I have another idea for you :

> it's may need to change with you:

I change your table component :

<Table responsive>
<thead>
<tr>
<th>
<p
className="p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
SM
</p>
</th>
{attributelist.map((attribute) => (
<th key={variation.Name}>
<p
className="ml=5 p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
{attribute.Name}
</p>
</th>
))}
<th>
<p
className="ml=5 p-2"
style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
>
Price
</p>
</th>
<th className="text-center" />
</tr>
</thead>
<tbody>
{variation.map((variations) => (
<TableRow variation={variations} />
))}
</tbody>
</Table>

And pass variation to each TableRow Component :

function TableRow({variation}) {
const [submitResponse, setSubmitResponse] = useState({
class: "",
openState: false,
});
const [response, setResponse] = useState();
const onSubmit = () => {
response
.then(() => {
// if success add to cart, process success animation
setSubmitResponse({
class: "added",
openState: true,
});
setTimeout(() => {
setSubmitResponse({
class: "added txtState",
openState: true,
});
}, 10);
setTimeout(() => {
setSubmitResponse({
class: "added",
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() => {
setSubmitResponse({
class: "",
openState: false,
});
}, 3500);
})
.catch(() => {
// if failed add to cart, process danger animation
setSubmitResponse({
class: "danger",
openState: true,
});
setTimeout(() => {
setSubmitResponse({
class: "danger txtState",
openState: true,
});
}, 10);
setTimeout(() => {
setSubmitResponse({
class: "danger",
openState: true,
});
}, 3000);
// reset back to normal after 3.5s
setTimeout(() => {
setSubmitResponse({
class: "",
openState: false,
});
}, 3500);
});
};
return (<tr key={variations.ID}>
<td className="text-dark">{variations.VariationSKU}</td>
{variations.Attributes.map((attribute) => (
<td key={attribute.ID} className="text-dark">
{attribute.Value}
</td>
))}
<td className="text-dark">
{`RM${variations.Price.toFixed(2)}`}
</td>
<td>
<Button
id="Sproduct-btn"
className={`btn add-to-cart w-100 ${ submitResponse.class }`}
data-toggle="tooltip"
type="button"
tag={!user ? Link : "a"}
to={!user ? "/login" : ""}
disabled={
submitResponse.openState ||
Status === "Inactive" ||
variationStatus === "Inactive" ||
Stock === 0 ||
variationStock === 0
}
style={{ fontSize: "15px", width: "30%" }}
{...(user && {
onClick: () =>
onSubmit(
setResponse(addToCart(productid, variations.ID))
),
})}
>
<div className="cart">
<div>
<div />
<div />
</div>
</div>
<div className="dots" />
{/* {variationStock === 0 || data.data.Stock === 0 ? (
<div className="pl-2 default">SOLD OUT</div>
) : (
<span className="pl-2 default">ADD TO BAG</span>
)} */}
<span className="pl-2 default">{result}</span>
<div className="success">ADDED</div>
<div className="failed">
FAILED TO ADDED, PLEASE TRY AGAIN
</div>
</Button>
</td>
</tr>)
}