Animal.js

// @flow

import React, { useState } from 'react'

import { css } from '@emotion/core'
import toString from '@sharyn/util/toString'
import swit from '@sharyn/util/swit'

const Animal = ({
  name,
  numberOfLegs,
  isFriendly,
}: {
  name: string,
  numberOfLegs?: number,
  isFriendly?: boolean,
}) => {
  // Hooks
  const [isFavorite, setIsFavorite] = useState(false)

  // Presentation, transformations to strings, handlers, no JSX
  const favoriteIcon = isFavorite ? '★' : '☆'
  const numberOfLegsStr = toString(numberOfLegs)
  const isFriendlyStr = swit(isFriendly, [[true, 'Friendly'], [false, 'Unfriendly']])
  const onStarClickHandler = () => setIsFavorite(!isFavorite)

  // CSS (with Emotion)
  const classes = {}
  classes.pointer = css({ cursor: 'pointer' })
  classes.star = css({ color: isFavorite ? 'orange' : 'black' }, classes.pointer)
  classes.friendliness = css({ color: isFriendly ? 'green' : 'red' })

  // JSX with basic logic only
  return (
    <div>
      <h2>
        <button css={classes.star} type="button" onClick={onStarClickHandler}>
          {favoriteIcon}
        </button>
        {name}
      </h2>
      {numberOfLegsStr && (
        <div>
          Legs: <span css={classes.legs}>{numberOfLegsStr}</span>
        </div>
      )}
      {isFriendlyStr && <div css={classes.friendliness}>{isFriendlyStr}</div>}
    </div>
  )
}

export default Animal