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>
);
};
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));