Stateless functions are a brilliant way to define highly reusable components. They don't hold state; they're just functions.
const MyExample = () => <div>Hello World!</div> They get passed props and context.
const MyExample = (props, context) => { return <div style={{color: context.color}}>Hi {props.name}</div> } They can define local variables, where a function block is used.
const MyExample = (props, context) => { const style = { fontWeight: "bold", color: context.color, } return <div style={style}>{props.name}</div> } But you could get the same result by using other functions.
const getStyle = context => ({ fontWeight: "bold", color: context.color, }) const MyExample = (props, context) => { return <div style={getStyle(context)}>{props.name}</div> } They can have defined defaultProps, propTypes and contextTypes.
MyExample.propTypes = { name: PropTypes.string.isRequired } MyExample.defaultProps = { name: "Guest" } MyExample.contextTypes = { color: PropTypes.string } 
Top comments (0)