Render both text and FontAwesome icon in function return

Question

I'm attempting to format a date using moment as follows: let formattedStartDate = moment(startDate).format('YYYY-MM-DD'); `

And later trying to return that formatted date, along with a FontAwesomeIcon object from the same function. So far my attempts look something like this:

return `${formattedStartDate} <FontAwesomeIcon icon={faArrowRight}/>`;

However this displays the date correctly, but [Object object] in place of the icon. I understand that this is because the FontAwesome object is indeed an object, but I'm unsure as to how to go about returning the actual icon from the same function. Any guidance would be appreciated.

Thank you.

EDIT: Rest of function:

formatDateRange(startDate, endDate) {
        let formattedStartDate = moment(startDate).format('YYYY-MM-DD');
        let formattedEndDate = moment(endDate).format('YYYY-MM-DD');

        return (
            <>
            {formattedStartDate + ' '}
            <FontAwesomeIcon icon={faArrowRight}/>
            {formattedEndDate}
            </>
        )
    }

Answer 1

Backticks allow interpolation for a JavaScript string - but you want to render React elements, so use JSX syntax instead.

return (<>
  {formattedStartDate + ' '}
  <FontAwesomeIcon icon={faArrowRight}/>
</>)