Five Ways to Write a Functional Component

Colin McNamara

Nov 22, 2019·1 min read

Functional components are the bread-and-butter of any React application, especially with the addition and expansion of React Hooks. This post breaks down a simple functional component (Version #1) and then shows four additional ways it could be written. Enjoy:

Version #1: ES5 and Props Object

This first version is very simple. It’s a simple function called `Button` that takes an argument, props.

Version #2: ES6 and Props Object

Version #3: ES6 and In-Function Destructured Props

Version #4: ES6 and Destructured Props

Version #5: ES6 and Export Default Anonymous Function