Variations of Stateless Functional Components

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

—``` // one liner const Language = ({language}) =>

• {language}

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

---```
/**
* If there are more than one line.
* Please notice that round brackets are optional here,
* However it's better to use 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 beside just JSX presentation * For instance some data manipulations needs to be done. * Please notice that round 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 (

{header}

) }

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

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

Here you can find working example of it.