Function UpperCaser

example/withoutSuspense/Functions.tsx:10–34

()

import { getFunctions, httpsCallable } from 'firebase/functions';

function UpperCaser() {
  const functions = useFunctions();
  const capitalizeTextRemoteFunction = httpsCallable<{ text: string }, string>(functions, 'capitalizeText');
  const [uppercasedText, setText] = useState<string>('');
  const [isUppercasing, setIsUppercasing] = useState<boolean>(false);

  const greetings = ['Hello World', 'yo', `what's up?`];
  const textToUppercase = greetings[Math.floor(Math.random() * greetings.length)];

  async function handleButtonClick() {
    setIsUppercasing(true);

    const { data: capitalizedText } = await capitalizeTextRemoteFunction({ text: textToUppercase });
    setText(capitalizedText);

    setIsUppercasing(false);
  }

  return (
    <>
      <WideButton label="Uppercase some text" onClick={handleButtonClick} />
      {isUppercasing ? <LoadingSpinner /> : <span>{uppercasedText || `click the button to capitalize "${textToUppercase}"`}</span>}
    </>
  );
}

function UpperCaserOnRender() {
  const greetings = ['Hello World', 'yo', `what's up?`];