Comment envelopper un tableau de balises span HTML avec plus de balises span?

Version improvisée:

function wrapLetters(word) {
  const wrappedLetters = [];
  const colours = ["red", "green", "yellow", "blue", "pink", "orange"];
  for (let i = 0; i < word.length; i++) {
    const rng = Math.floor(Math.random() * colours.length);
    wrappedLetters.push(
      <span key={i} style={{ color: colours[rng] }}>
        {word[i]}
      </span>
    );
  }
  return wrappedLetters;
}

function wrapWord(wrappedLetters, i, notLast) {
  return (
    <span className="wrapper" key={i}>
      {notLast
        ? [...wrappedLetters, <span className="white-space" />]
        : wrappedLetters}
    </span>
  );
}

export default function Header({ text }) {
  const words = text.split(" ");
  const wrappedWords = words
   .map(wrapLetters)
   .map((wrappedLetters, i) => {
     return wrapWord(wrappedLetters, i, i < words.length - 1);
   });
  return <h1 id="header">{wrappedWords}</h1>;
}

Sandbox: https://codesandbox.io /s/eloquent-sea-lvg6x?file=/src/Component.js:0-871

J'ai écrit le composant comme ça. J'espère que les commentaires sont explicites.

function wrapWord(word) {
  const lettersData = [];
  const colours = ["red", "green", "yellow", "blue", "pink", "orange"];
  for (let i = 0; i < word.length; i++) {
    const rng = Math.floor(Math.random() * colours.length);
    lettersData.push(
      <span key={i} style={{ color: colours[rng] }}>
        {word[i]}
      </span>
    );
  }
  return lettersData;
}

export default function Header({ text }) {
  const words = text.split(" "); // split text into an array if words
  const wordsData = words.map((word) => wrapWord(word)); // for each word create an array of spans

  // this method wraps each word with a span, and injects a space if it's not last word
  const combinedWords = wordsData.map((arr, i) => {
    return (
      <span className="wrapper" key={i}>
        {i < wordsData.length - 1
          ? [...arr, <span className="white-space" />]
          : arr}
      </span>
    );
  });

  return <h1 id="header">{combinedWords}</h1>;
}

Bac à sable de code: https: // codesandbox. io / s / happy-hugle-6xpud? file = / src / Component.js: 0-739