This is my react component
const ButtonComponent = ({ children, onClick, disabled, className = "" }) => {
console.log("class name is ", className);
const buttonClassName = `
bg-green-700
flex
hover:bg-green-500
transition
duration-300
ease-in-out
text-white
h-auto
text-base
p-2
rounded-[5px]
m-2
${
disabled
? "bg-teal-200 text-teal-800 cursor-not-allowed"
: "cursor-pointer"
}
${className}
`;
return (
<button onClick={onClick} className={buttonClassName} disabled={disabled}>
{children}
</button>
);
};
export default ButtonComponent;
The console.log is working properly, but in the JSX, the className prop is not giving right value.