Add <strong> tag within JSX with backticks

Issue

I have a div that Is going to render some JSX. within that JSX I want to bold some text. When I add my jsx like this I get an error. I can't seem to find any articles on this exact problem and need some help.

Im sure im missing something very simple

Here is my div

How can I bold only the {Array.length} ?

When I render it shows Your list contains [object Object] row(s).

 <div>
        <div className='border-solid border-2x border-300rounded-soft text-center cursor-pointer'>
          { `Your list contains ${<strong>{Array.length}</strong>} row(s).`}
        </div>
        </div>

Solution

It's because any thing inside a backtick will be translated into a string.

what you can do is to separate it (you no longer need the backtick in this case):

<div>
  <div className='border-solid border-2x border-300rounded-soft text-center cursor-pointer'>
    Your list contains row(s). <strong>{Array.length}</strong> row(s).
  </div>
</div>

Answered By - I am L