React throws error – TypeError: Cannot read properties of undefined (reading ‘greet’)

React is throwing me an error which I don’t understand where is coming from. Below is the component in question. The error shows up only occasionally but of course it causes the entire app to crash. What I don’t understand is how on Earth greeting object is undefined for React if I specifically set it in the state to have empty strings for properties greet and lang at first but it still doesn’t work. What am I not getting here?

import { useState, useEffect } from "react";
import { useUser } from "../../hooks/useUser";

export const Heading = () => {
  const user = useUser();
  const [greeting, setGreeting] = useState({ greet: "", lang: "" });
  useEffect(() => {
    const greetings = [
      { greet: "Salut", lang: "French" },
      { greet: "Hola", lang: "Spanish" },
      { greet: "Cześć", lang: "Polish" },
      { greet: "Hallo", lang: "German" },
      { greet: "Hej", lang: "Swedish" },
      { greet: "Hi", lang: "English" },
      { greet: "Ciao", lang: "Italian" },
    ];
    const randomNumber = Math.round(Math.random() * greetings.length - 1);
    setGreeting(greetings[randomNumber]);
  }, []);
  return (
    <div className="heading-container">
      <h1 className="heading-primary">
        <span id="greet">{greeting.greet} </span>
        <span className="green-highlight">
          {user?.displayName || "Anonymous"}
        </span>
      </h1>
      <span className="greeting-subtitle">
        This is a greeting in <span id="lang">{greeting.lang}</span> 😉
      </span>
    </div>
  );
};

Answer

That is because you are not correctly generating a random number. Your current implementation can return -1 as a random number, and then greetings[-1] will be equal to undefined.

Please add parentheses around greetings.length – 1, like this:

const randomNumber = Math.round(Math.random() * (greetings.length - 1));