J'essaie de créer une fonction qui met en évidence les mots dans une phrase. Voici le code correspondant.

highlightText = () => { const { questionItem, } = this.props; const words = questionItem.split(/\s+/); const highlighted = words.map((word, index) => ( {word} )); const text = highlighted.join(' '); console.log(text); console.log({ highlighted }); return highlighted; }

Ici, si je console "texte", j'obtiens [Object object], donc je renvoie "highlight" puis j'utilise réduire pour le rejoindre.

const text3 = 
{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}
;

Je souhaite utiliser ce "text3" dans un composant. Le problème est que j'obtiens "text3" comme

Je veux que ce soit un élément HTML pour pouvoir l'utiliser dans mon composant. Comment puis-je le convertir ? De plus, si j'affiche

{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}

{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}

directement dans la page Web plutôt que dans mon composant Cela fonctionne bien lors de l'utilisation de .

export default function HighlightText({text}) { return {text}