I was attempting to incorporate the select component into my project when I encountered an issue with the onClick function. It seems that it was not working properly, even though I made use of 'use client;' for my component.
"use client";
import React from "react";
import styles from "./select.module.scss";
...
export const ChartSelect: React.FC<{
chartType: "monthly" | "yearly" | "half-yearly";
setChartType: React.Dispatch<
React.SetStateAction<"monthly" | "yearly" | "half-yearly">
>;
}> = (props) => {
...
const handleOnClick = (value: "monthly" | "yearly" | "half-yearly") => {
console.log("handleOnClick");
props.setChartType(value);
};
return (
<div className={styles.wrapper}>
<div className={styles.select}>{findLabelByValue(props.chartType)}</div>
<div className={styles.dropdown}>
{options.map((option) => (
<div
className={styles.option}
onClick={() => {
console.log("PURE ONCLICK");
handleOnClick(option.value);
}}
>
{option.label}
</div>
))}
</div>
</div>
);
};