Button onClick

[leomfelicissimo]

First of all! Congratulations on the amazing work! Remix really is very practical and simple!

I would like to understand better about some stuff, but I can't find answers on documentation.

1. I can't see console.log outputs, why? I tried putting it on different points of the code, but nothing is happening and it never logs.

2. I've encapsulated my button as a component and tried to create a "LinkButton" like. But, the handler has not been called.

import { useNavigate } from "remix";

type ButtonProps = {
  text: string;
  onClick?: () => void;
  fullWidth?: boolean;
  contrast?: boolean;
  to?: string;
};

export default function Button({ text, onClick, to, fullWidth = false, contrast = false}: ButtonProps) {
  const navigate = useNavigate();
  const width = fullWidth ? 'w-full' : 'w-48'
  const bgColor = contrast ? 'bg-white hover:bg-blue-200' : 'bg-blue-700 hover:bg-blue-300';
  const handleClick = () => (onClick && onClick()) || (to && navigate(to)); 

  return (
    <button onClick={handleClick} className={`${bgColor} rounded-lg p-2 ${width}`}>
      {text}
    </button>
  );
}

What am I doing wrong?

[hollandThomas]

Every time some JS does not execute it's probably because you forgot to include <Scripts /> in root.tsx, which can be done per-route
https://remix.run/docs/en/v1/guides/disabling-javascript

[leomfelicissimo]

It works! :D Thank you @hollandThomas!