This article’s main focus is on the React JS – Props, its management, and Functions that utilize with help of Props.
Recap:
- In the previous article, get introduced to the State of React. If you are new to React or need a gentle introduction to the REact features that are most frequently used throughout articles, review this once.
1. What are props in React
React JS – Props are basically an object that is injected into components and provides some data that can be shared between other components ( from a parent to children). An important characteristic of props is that they are read-only and components shouldn’t modify them in order to behave like pure functions. React JS – Props is short for Properties. In React, props can be passed to a component, and they should not be changed within a component for getting from major error.
Props cannot be changed within a component and hence Props are immutable.
Passing Props
In the above example, we have defined a Javascript class which is the Heading component. This component renders a message as output. And this message is given to the Headingcomponent as a prop.
Now the Headingcomponent can be rendered within any page or component with different messages as per given props. The point of using prop here is to reuse the code for other components. Hence, the same Headingcomponent can be used across the web app, with different props.
Types of props, required and default props
You can pass props in your application. Most often you will only know what type of data you want to pass. In case of small applications, you probably won’t have any problems with the types of props that you passed. But larger applications are dedicated to errors and it would be good if we have some methods to check whether the structure of the props object is correct.
That’s where PropTypes come into play. It’s a feature that can verify if the declared type of props is valid (e.g. passing name as a string and not as a number). Let’s take a quick look at some types that we can use:
- array
- number
- string
- string
- object
- function
There are also some other variations like setting a certain type of array values, defining an exact shape of an object, or marking a prop required for our component.
what are PropTypes?
React supports data validation through PropTypes. It is React’s in-built type-checker. You can define components without PropTypes. But, without PropTypes or some sort of type checking, we run into the danger of passing during a wrong data type to a component, which could cause a crash or some unexpected outcome in your application.
Here is a sample code of how can we declare PropTypes in a prentataionaal component, mark some of the props as required and provide some default values for them:
Name and age props are required so we need to provide some default data for them in defaultProps as done above. We declared that we expect age to be a number but a string is provided instead so React will give us a warning.
console:
Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `ReactProps`, expected `number`We can see that PropTypes.oneOf works fine because we provided a different value than we declared (male or female) so there is also a warning as given below
Warning: Failed prop type: Invalid prop `additionalInfo.gender` of value `something-else` supplied to `ReactProps`, expected one of ["male","female"].
What are the defaultprops?
Default values can be assigned to the props using defaultProps method. When a component does not receive it’s props, then it cosiders to the defaultProps that has been assigned.
Take a look further at the code below that shows how we have added defaultProps to our component
It is not necessary to assign defaultProps if you have coded your props as required. Always define defaultProps for all optional props.
What is isRequired method and when do I use this?
A isRequired method in React particularly prop required by the component. Anytime the component is called it also needs to be passed the props that are marked as isRequired. This tells us that we don’t accidentally miss certain props while calling components.
When we forget to pass the specified props to a component, React throws a mistake within the development console. This helps in catching missing props during the development phase.
If you’ve enjoyed this article, please show some love by sharing it with others. Thank you!
Links :
React js- props(official documentation)
