Logic-Less JSX. Keep the JSX of your components clean by putting data logic in variables.

clean-jsx.js

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>
  )
}