I previously had the following code:
projectName: project.get('name') === 'default' ? 'No Project' : project.get('name')In the render() method, it was written like this:
<div className='c-card__projects'>
Project: {card.projectName}
</div>
This is how it appeared in the user interface:
https://i.stack.imgur.com/dAXcg.png
Now, I have made a change to consider the project's color as well:
projectName: <div style={{color: project.get('color')}}>
{project.get('name') === 'default' ? 'No Project' : project.get('name')}
</div>
As a result, it now looks like this:
https://i.stack.imgur.com/0xR3Y.png
How can I make it display on a single line as before, rather than spanning across two lines (I only wanted to change the color)?