When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions?
<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"`This is my button code within the table above
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);
});
};This is my onSubmit function for displaying the animation after adding an item