mirror of
https://github.com/jbranchaud/til
synced 2026-01-07 09:08:01 +00:00
Add Enforce Specific Values With PropTypes as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_650 TILs and counting..._
|
_651 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -451,6 +451,7 @@ _650 TILs and counting..._
|
|||||||
- [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md)
|
- [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md)
|
||||||
- [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)
|
- [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)
|
||||||
- [Dynamically Add Props To A Child Component](react/dynamically-add-props-to-a-child-component.md)
|
- [Dynamically Add Props To A Child Component](react/dynamically-add-props-to-a-child-component.md)
|
||||||
|
- [Enforce Specific Values With PropTypes](react/enforce-specific-values-with-proptypes.md)
|
||||||
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
||||||
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
|
||||||
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
||||||
|
|||||||
23
react/enforce-specific-values-with-proptypes.md
Normal file
23
react/enforce-specific-values-with-proptypes.md
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# Enforce Specific Values With PropTypes
|
||||||
|
|
||||||
|
Being able to constrain our user interfaces to very specific values is
|
||||||
|
valuable. This makes our interfaces easier to reason about and easier to
|
||||||
|
test. PropTypes in general are one of the ways that we constrain our UIs. We
|
||||||
|
can go even further than simple type constraints by limiting a prop to a
|
||||||
|
specific set of values, an enum if you will.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
MyComponent.propTypes = {
|
||||||
|
flavors: PropTypes.oneOf(['Vanilla', 'Chocolate', 'Strawberry']),
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The docs say about `oneOf()`:
|
||||||
|
|
||||||
|
> You can ensure that your prop is limited to specific values by treating it
|
||||||
|
> as an enum.
|
||||||
|
|
||||||
|
If we use `MyComponent` with a value such as `Pistachio`, we'll have a
|
||||||
|
console warning to answer for.
|
||||||
|
|
||||||
|
[source](https://reactjs.org/docs/typechecking-with-proptypes.html)
|
||||||
Reference in New Issue
Block a user