Variations of Stateless Functional Components

index.html

<div id="app" />

script.babel

const languages = [
  'JavaScript',
  'Python',
  'Java',
  'Elm',
  'TypeScript',
  'C#',
  'F#'
]

// one liner
const Language = ({language}) => <li>{language}</li>

Language.propTypes = {
  message: React.PropTypes.string.isRequired
}

/**
* If there are more than one line.
* Please notice that curly brackets are optional here,
* however I uses them for readability
*/
const LanguagesList = ({languages}) => (
  <ul>
    {languages.map(language => <Language language={language} />)}
  </ul>
)

LanguagesList.PropTypes = {
  languages: React.PropTypes.array.isRequired
}

/**
* This syntax is used if there are more work is besided just JSX presentation
* For instance some data manipulations needs to be done.
* Please notice that curly brackets after return are required,
* Otherwise return will return nothing (undefined)
*/
const LanguageSection = ({header, languages}) => {
  // do some work
  const formattedLanguages = languages.map(language => language.toUpperCase())
  return (
    <fieldset>
      <legend>{header}</legend>
      <LanguagesList languages={formattedLanguages} />
    </fieldset>
  )
}

LanguageSection.PropTypes = {
  header: React.PropTypes.string.isRequired,
  languages: React.PropTypes.array.isRequired
}

ReactDOM.render(
  <LanguageSection 
    header="Languages" 
    languages={languages} />,
  document.getElementById('app')
)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

variations-of-stateless-functional-components.markdown

Variations of Stateless Functional Components

Example of different ways to write stateless functional components in React

A Pen by Vlad Bezden on CodePen.

License.