Foreach Char in String in nextjs not working-CodePudding

I tried to loop each character in String but SPANS are not rendering. What am I doing wrong?

export default function Work() {
  const logoText =
    "The future starts here.";

  return (
    <div className="absolute w-full h-full">
        {logoText
           .split("")
           .forEach(
             (character, i) =>
               `<span className="rotate-[${
                 i * 8.1
               }deg] absolute left-[50%] text-xl origin-[0px_130px]">${character}</span>`
         )}
    </div>

I also tried with putting only "character" instead of all the span code and it doesnt' work.

CodePudding user response：

change forEach to map for geting return

try this it work fine:

export default function Work() {
  const logoText =
    "The future starts here.";

  return (
    <div className="absolute w-full h-full">
      {logoText.split('').map((character, i) => (
          <span
            className="rotate-[${
                i * 8.1
              }deg] absolute left-[50%] text-xl origin-[0px_130px]"
          >
            {character}
          </span>
        ))}
    </div>

also you can check live code here: https://stackblitz.com/edit/react-wnwgkt?file=src/App.js