Reputation: 1566
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.
Upvotes: 0
Views: 47
Reputation: 3274
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>
Upvotes: 1