Components that are not able to receive any props from the parents are not particularly useful, and the stateless functional components can receive props as parameters:

props => <button>{props.text}</button>;

Alternatively, we can use an even more concise syntax with the ES6 destructuring:

({ text }) => <button>{text}</button>;

We can define the props so that a stateless function can receive using the propTypes attribute in a similar way as we do when we extend components:

import { string } from 'prop-types';

const Button = ({ text }) => <button>{text}</button>;
 
Button.propTypes = { 
  text: string 
} 

Stateless functional components also receive a second parameter that represents the context:

(props, context) => ( 
  <button>{context.currency}{props.value}</button> 
);