Suggestions for stateless-function.md

[TonyGravagno]

ref:
https://github.com/reactpatterns/reactpatterns-website/blob/main/docs/stateless-function.md

First Suggestion

I recommend a revision of this example

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',
}

to:

import PropTypes from 'prop-types'

const UserName = props => <p>The user name is: {this.props.username}</p>

UserName.propTypes = {
  username: PropTypes.string.isRequired,
}

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

Reasons

1. In the original, we see a default for username but we don't see where it's used. In the revision it's clear how the username is used.
2. In the original, UserPassword is PascalCased, but Username is a single word. In the revision there is only one function, and it's consistently PascalCased.
3. It's not practical to display a password. It is practical to display a name.

Second Suggestion

Regarding this example:

import PropTypes from 'prop-types'

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

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

Concerns:

1. contextTypes is from the legacy API.
2. WowComponent isn't used in these examples - this example should include a reference to UserName.
3. The RefOrContext parameter (second 'context' param on function) should probably be replaced with useContext.
4. I believe PropTypes.shape should be used to describe context.

Since there are multiple ways of approaching changes to this example, I'm not providing a suggestion.

Thanks!