Why isn't my onclick function working in Shopify CLI remix with Prisma and MongoDB?

saurav2211
Shopify Partner
1 0 0

I am working in Shopify CLI remix, prisma(database:-mongodb) and want to store product layout and thumbnail options value in db, but my onclick function is not working when I am clicking on product theme design on frontend, 

  <div className="design_thumb">
            <label htmlFor="bottome_thumb">
              <input
                hidden
                type="radio"
                name="product_thumb_img"
                id="bottome_thumb"
              />
             
                <img src={bottomeThumbnail}  onClick={() => handleThumbnailPosition("bottome_thumb")} />
                <p>Bottom side thumbnail</p>
           
            </label>
          </div>
This is where I call the function
export default function product_design() {
  const [selectedOptions, setSelectedOptions] = useState({
    thumbnailPosition: "",
    thumbnailDesign: "",
    allowSlider: "",
  });



  const handleThumbnailPosition = (position) => {
    console.log("Button Clicked");
    setSelectedOptions({ ...selectedOptions, thumbnailPosition: position });
  };

    const handleThumbnailDesign = (design) => {
      setSelectedOptions({ ...selectedOptions, thumbnailDesign: design });
    };

    const handleSlider = (slider) => {
      setSelectedOptions({ ...selectedOptions, allowSlider: slider });
    };
This is list for eventhandling functions.
 
Reply 1 (1)

philpboyle
Excursionist
33 1 4

Try following code: change details according with you  details

 

 

import React, { useState } from 'react';

export default function ProductDesign() {
const [selectedOptions, setSelectedOptions] = useState({
thumbnailPosition: "",
thumbnailDesign: "",
allowSlider: "",
});

const handleThumbnailPosition = (position) => {
console.log("Thumbnail Position Clicked");
setSelectedOptions({ ...selectedOptions, thumbnailPosition: position });
};

const handleThumbnailDesign = (design) => {
console.log("Thumbnail Design Clicked");
setSelectedOptions({ ...selectedOptions, thumbnailDesign: design });
};

const handleSlider = (slider) => {
console.log("Slider Clicked");
setSelectedOptions({ ...selectedOptions, allowSlider: slider });
};

return (
<div className="product-design">
<div className="design_thumb">
<label htmlFor="bottom_thumb">
<input
hidden
type="radio"
name="product_thumb_img"
id="bottom_thumb"
/>
<img
src={bottomeThumbnail}
alt="Bottom Thumbnail"
onClick={() => handleThumbnailPosition("bottom_thumb")}
/>
<p>Bottom side thumbnail</p>
</label>
</div>
{/* Add more thumbnail options here */}
</div>
);
}