Function doesn’t return correct state

I am trying to write a function to get a random color from an array COLORS. But, the problem is instead of returning only one color, it is returning too many colors, resulting in an infinite error. Resulting in which react throws Too many re-renders error. What’s wrong with my code?

const COLORS = [
  "#FFAEBC",
  "#1ec891",
  "#ff725e",
  "#ffd05b",
  "#A0E7E5",
  "#5885AF",
];

const DisplaySubject = (props) => {

  const [randomColor, setRandomColor] = useState("");

  const generateRandomColor = (colors) => {
    let randColorIndex, randColor;
    for (let i = 0; i < colors.length; i++) {
      randColorIndex = Math.floor(Math.random() * colors.length);
      randColor = colors[randColorIndex];
      return randColor;
    }
    console.log(randColor);
    setRandomColor(randColor);
  };

  generateRandomColor(COLORS);

  console.log("random color state :", randomColor);
  return (
    <div>
      Let's get started
    </div>
  );
};

export default DisplaySubject;

Answer

First, fix your color generator function:

const generateRandomColor = (colors) => {
    const randColorIndex = Math.floor(Math.random() * colors.length);
    return colors[randColorIndex];
};

Then you can use it as the initial value for useState:

const DisplaySubject = (props) => {
    const [randomColor, setRandomColor] = useState(generateRandomColor(COLORS));
    return (
        <div style={{ backgroundColor: randomColor }}>
            Let's get started
        </div>
    );
};

The problem was to call setRandomColor inside the getRandomColor function, that caused an infinite render cycle.