2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Review Using Props with Stateless Functional Components
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Review Using Props with Stateless Functional Components
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
---
|
|
|
|
## Hints
|
|
|
|
|
|
|
|
### Hint 1
|
|
|
|
A functional(a.k.a. stateless) component is just a plain javascript function which takes props as an argument and returns a react element.
|
|
|
|
|
|
|
|
### Hint 2
|
|
|
|
Use `Component.defaultProps` to set default props.
|
|
|
|
|
|
|
|
### Hint 3
|
|
|
|
Use `Component.propTypes` to set props types.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## Solutions
|
|
|
|
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
|
2018-10-12 15:37:13 -04:00
|
|
|
```javascript
|
2019-07-24 00:59:27 -07:00
|
|
|
const Camper = props => <p>{props.name}</p>;
|
2018-10-12 15:37:13 -04:00
|
|
|
|
|
|
|
Camper.defaultProps = {
|
2019-07-24 00:59:27 -07:00
|
|
|
name: "CamperBot"
|
2018-10-12 15:37:13 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
Camper.propTypes = {
|
|
|
|
name: PropTypes.string.isRequired
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
#### Relevant Links
|
2018-10-12 15:37:13 -04:00
|
|
|
- [Typechecking With PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
|
2019-07-24 00:59:27 -07:00
|
|
|
</details>
|