React Stateless Functional Component

When writing React application we need components to present the application elements. However, often times creating a complete component class might be an overkill for a simple representation, for example a simple button. We can use Stateless Functional Component to simplify how we create a dumb/stateless component

Stateless component can only render props, this should be its only function. An example of a stateless functional component in a file button.js:

import React from ‘react’;

const Button = props => (
   <button onClick={props.onClick}>
      {props.label}
   </button>
);

export default Button;

We then can use the Button in our application, like this:

import React from ‘react’;
import Button from './button';

class MyComponentClass extends React.Component {
  render() {
    return <Button label='Stateless Button' onCLick={console.log('button')} />;
  }
}

Stateless component is a much simpler way to organize our dumb/stateless representations.