Append text with styling

July 18, 2022

I was wondering how to merge 2 pieces of text together in React JS. Difference is 1 section of the text has its own unique styling. Example code below:

<div>
    <div>
      {'If you haven\'t recieved an email, please check your spam filter or '}
    </div>
    <div style={{ color: 'red' }}>
      try another email address
    </div>
</div>

I have tried using flex and flex direction as row in the parent div, but have had no luck. This is what happens with flex in the parent div.

>Solution :

You could use span (instead of div).

The span tag is an inline container used to mark up a part of a text and it doesn’t break to the next line

<div>
  <span>
    {'If you haven\'t recieved an email, please check your spam filter or '}
  </span>
  <span style={{ color: 'red' }}>
    try another email address
  </span>
</div>