Note that the vars at the top keep the JSX simple. Other options here: https://verekia.com/react/logic-less-jsx/

logic-less-jsx.jsx

// Logic-less JSX via vars above
const Animal = ({ id, name, legCount, isFriendly }) => {
  const url = `url/animal/${id}`
  const legCountStr = toString(legCount) || '?'
  const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
  const hasNotEnoughData = legCount === undefined && isFriendly === undefined

  return (
    <li>
      <a href={url}>{name}</a> - {legCountStr} legs
      {friendliness && ` - ${friendliness}`}
      {hasNotEnoughData && ' - Not enough data!'}
    </li>
  )
}

// Without declaring vars above, it's harder to read:
const Animal = ({ id, name, legCount, isFriendly }) => (
  <li>
    <a href={`url/animal/${id}`}>{name}</a> - {toString(legCount) || '?'} legs
    {isFriendly !== undefined &&
      ` - ${isFriendly ? 'Friendly' : 'Unfriendly'}`}
    {legCount === undefined && isFriendly === undefined &&
      ' - Not enough data!'}
  </li>
)