I have a tricky one here: I am building a code editor in React that styles different parts of ES6 code. My app works by, converting all the code to one string, then uses Regex to identify where to insert <span>, <strong>, and <br/> tags. I have then taken that long string and used regex with split() to extract all the tags I use into an array. I am now left with this array of strings:

['', '<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/>', '']

I need to basically find a way to convert the applicable strings to pure JSX and end up with an array of both strings and JSX.Elements to render out my component. I'm going to take a shower and think, I'm assuming a map of some sort will work??

Appreciate your time and help.