Aquí tengo uno complicado: estoy creando un editor de código en React que diseña diferentes partes del código ES6. Mi aplicación funciona convirtiendo todo el código en una cadena, luego usa Regex para identificar dónde insertar las etiquetas <span> , <strong> y <br/> . Luego tomé esa cadena larga y usé expresiones regulares con split() para extraer todas las etiquetas que uso en una matriz. Ahora me quedo con esta matriz de cadenas:

 ['', '<strong>', 'for', '</strong>', ' (', '<strong>', 'let', '</strong>', ' ', '<span style={{color:"blue"}}>', 'i', '</span>', ' = ', '<span style={{color:"red"}}>', '1', '</span>', '; ', '<span style={{color:"blue"}}>', 'i', '</span>', ' <= ', '<span style={{color:"red"}}>', '10', '</span>', '; ', '<span style={{color:"blue"}}>', 'i', '</span>', '++) {', '<br/>', ',    console.log(', '<span style={{color:"green !important"}}>', '`Pass number ${', '<span style={{color:"blue"}}>', 'i', '</span>', '}`', '</span>', ');', '<br/>', ',}', '<br/>', '']

Básicamente, necesito encontrar una manera de convertir las cadenas aplicables a JSX puro y terminar con una matriz de ambas cadenas y JSX.Elements para representar mi componente. Voy a tomar una ducha y pensar, ¿supongo que algún tipo de mapa funcionará?

Agradezco su tiempo y ayuda.