React - Stateless function

#react #webdev #javascript #reactfunctions

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
}