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.