Function Components#

Stateless Components#

• pure function that takes children and props and outputs JSX
• pure means no side-effects
• children are the component’s subtree
• props are attributes
• type: React.FunctionComponent, FC for short

import React, { FC } from 'react'

export const Button: FC = ({ children }) => (
  <button type="button">{children}</button>
)

export default <Button>Hello world!</Button>

Stateful Components#

• a function component that uses React hooks
• can have state and side-effects

import React, { FC, useState } from 'react'

export const Pizza: FC = () => {
  const [topping, setTopping] = useState('none')
  return (
    <div>
      <p>Choose a pizza topping:</p>
      <div>
        <button type="button" onClick={() => setTopping('tomato sauce')}>
          tomato sauce
        </button>
        <button type="button" onClick={() => setTopping('bbq sauce')}>
          bbq sauce
        </button>
        <button type="button" onClick={() => setTopping('garlic sauce')}>
          garlic sauce
        </button>
      </div>
      <p>Chosen topping: {topping}</p>
    </div>
  )
}

export default <Pizza />