1import React from 'react';
2import { PropTypes } from 'prop-types';
3
4const student = (props) => {
5 return (
6 <div>
7 <p>Student Name: {props.name}</p>
8 <p>Age: {props.age}</p>
9 </div>
10 );
11};
12
13student.propTypes = {
14 name: PropTypes.string,
15 age: PropTypes.number
16};
17
18export default student;
1import PropTypes from 'prop-types';
2
3MyComponent.propTypes = {
4 // You can declare that a prop is a specific JS type. By default, these
5 // are all optional.
6 optionalArray: PropTypes.array,
7 optionalBool: PropTypes.bool,
8 optionalFunc: PropTypes.func,
9 optionalNumber: PropTypes.number,
10 optionalObject: PropTypes.object,
11 optionalString: PropTypes.string,
12 optionalSymbol: PropTypes.symbol,
13
14 // Anything that can be rendered: numbers, strings, elements or an array
15 // (or fragment) containing these types.
16 optionalNode: PropTypes.node,
17
18 // A React element.
19 optionalElement: PropTypes.element,
20
21 // A React element type (ie. MyComponent).
22 optionalElementType: PropTypes.elementType,
23
24 // You can also declare that a prop is an instance of a class. This uses
25 // JS's instanceof operator.
26 optionalMessage: PropTypes.instanceOf(Message),
27
28 // You can ensure that your prop is limited to specific values by treating
29 // it as an enum.
30 optionalEnum: PropTypes.oneOf(['News', 'Photos']),
31
32 // An object that could be one of many types
33 optionalUnion: PropTypes.oneOfType([
34 PropTypes.string,
35 PropTypes.number,
36 PropTypes.instanceOf(Message)
37 ]),
38
39 // An array of a certain type
40 optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
41
42 // An object with property values of a certain type
43 optionalObjectOf: PropTypes.objectOf(PropTypes.number),
44
45 // An object taking on a particular shape
46 optionalObjectWithShape: PropTypes.shape({
47 color: PropTypes.string,
48 fontSize: PropTypes.number
49 }),
50
51 // An object with warnings on extra properties
52 optionalObjectWithStrictShape: PropTypes.exact({
53 name: PropTypes.string,
54 quantity: PropTypes.number
55 }),
56
57 // You can chain any of the above with `isRequired` to make sure a warning
58 // is shown if the prop isn't provided.
59 requiredFunc: PropTypes.func.isRequired,
60
61 // A required value of any data type
62 requiredAny: PropTypes.any.isRequired,
63
64 // You can also specify a custom validator. It should return an Error
65 // object if the validation fails. Don't `console.warn` or throw, as this
66 // won't work inside `oneOfType`.
67 customProp: function(props, propName, componentName) {
68 if (!/matchme/.test(props[propName])) {
69 return new Error(
70 'Invalid prop `' + propName + '` supplied to' +
71 ' `' + componentName + '`. Validation failed.'
72 );
73 }
74 },
75
76 // You can also supply a custom validator to `arrayOf` and `objectOf`.
77 // It should return an Error object if the validation fails. The validator
78 // will be called for each key in the array or object. The first two
79 // arguments of the validator are the array or object itself, and the
80 // current item's key.
81 customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
82 if (!/matchme/.test(propValue[key])) {
83 return new Error(
84 'Invalid prop `' + propFullName + '` supplied to' +
85 ' `' + componentName + '`. Validation failed.'
86 );
87 }
88 })
89};
1// proptypes using class component
2Detaljer.PropTypes = {
3 detaljer: PropTypes.string.isRequired,
4 feilkode: PropTypes.string,
5 removeEvent: PropTypes.string.isRequired
6};
7
8// proptypes using function component
9Detaljer.propTypes = {
10 detaljer: PropTypes.string.isRequired,
11 feilkode: PropTypes.string,
12 removeEvent: PropTypes.string.isRequired
13};
1//You can now use `PropTypes.elementType`
2// to validate for Component type props
3
1Basic types:
2- PropTypes.any: The prop can be of any data type
3- PropTypes.bool: The prop should be a Boolean
4- PropTypes.number: The prop should be a number
5- PropTypes.string: The prop should be a string
6- PropTypes.func: The prop should be a function
7- PropTypes.array: The prop should be an array
8- PropTypes.object: The prop should be an object
9- PropTypes.symbol: The prop should be a symbol
10
11Renderable types:
12- PropTypes.node: The prop should be anything that can be rendered by React
13 a number, string, element, or array (or fragment) containing these types
14- PropTypes.element: The prop should be a React element
15
16Instance types:
17- PropTypes.instanceOf(class): The prop should be an instance of class
18
19Multiple types:
20- PropTypes.oneOf: The prop is limited to a specified set of values,
21 treating it like an enum
22- PropTypes.oneOfType: The prop should be one of a specified set of
23 types, behaving like a union of types
24
25Collection types:
26- PropTypes.arrayOf: ensures that the prop is an array in which all
27 items match the specified type.
28- PropTypes.objectOf: ensures that the prop is an object in which all
29 property values match the specified type.
30- PropTypes.shape: ensures that the prop is an object that contains a set
31 of specified keys with values of the specified types.
32- PropTypes.exact: use for strict (or exact) object matching