Stateless Function (Presentational Component)

What is Stateless Function?#

Stateless function is a way to define React components as a function. Rather than as a class or via React.createClass.
Stateless function does not hold state; just props.

For examples#

Without stateless function, write a presentational component that is just renders props, and doesn't has state.

const UserPassword = React.createClass({
  render() {
    return <p>The user password is: {this.props.userpassword}</p>
  },
})

// OR

class Userpassword extends React.Component {
  render() {
    return <p>The user password is: {this.props.userpassword}</p>
  }
}

With stateless function.

const UserPassword = function(props) {
  return <p>The user password is: {this.props.userpassword}</p>
};

With stateless function, arrow function, destructuring and implicit return.

const UserPassword = ({userpassword}) => <p>The user password is: {userpassword}</p>

Stateless function is great for styling as well.

const PrimaryButton = props => {
  const styles = { background: 'red', color: 'white' }

  return <button {...props} style={styles} />
}

Stateless function with event handlers.

const Button = props => {
  const onClick = e => console.log('You clicked me!')

  return <button onClick={onClick}>Click me!</button>
};

Stateless function can have defined defaultProps, propTypes.

import PropTypes from 'prop-types'

const UserPassword = props => <p>The user password is: {this.props.userpassword}</p>

UserPassword.propTypes = {
  userpassword: PropTypes.string.isRequired,
}

Username.defaultProps = {
  username: 'Jonh',
}

Stateless function can have defined contextTypes (when using context, it's simply passed in as the second argument).

import PropTypes from 'prop-types'

const UserPassword = (props, context) => <p>User password is {context.password}</p>

WowComponent.contextTypes = {
  password: PropTypes.string.isRequired,
}