Underline specific words of a string in React

So I’ve got a string being sent to a class that is split by \n for format. I was wondering if it was possible to underline specific words of the string so it looks better?

Currently this is what is being passed

"Name : Jackson 
\nLabel: Movie
\nDirector: 
\nGenre: Action
\nActors: Will, Jack, Carrie
\nMetascore: 90/100
\nRevenue: 87.5M
\nRuntime: 100 min
\nRating: 9/10"

And I would like for the word after the \n until the ":" to be underlined but all I’ve seen are making an entire string underlined.

Heres how I’m currently parsing the string.

 const newText = text.split('\n').map(str => <p>{str}</p>);

My guess would be to have str split again by : inside the .map and using
<Text style={styles.bold}> </Text> to set it?

>Solution :

You can split each line of your text by :, like below:

const string = `
Name: Jackson 
Label: Movie
Director: 
Genre: Action
Actors: Will, Jack, Carrie
Metascore: 90/100
Revenue: 87.5M
Runtime: 100 min
Rating: 9/10
`;

function MyList() {
  const strings = string.split('\n').map((str) => {
    const [label, value] = str.split(':');
    return (
      <div>
        <u>{label}</u>:<p>{value}</p>
      </div>
    );
  });

  return strings;
}

<u> stands for underline in html.

You can also add a className attribute to the tag surrounding the label part and use text-decoration: underline;