Before we dive into "Props" we define React js a little bit, So React js is a JavaScript library for building fast and interactive user interfaces (UI). it has a different process that's why sometimes learners find difficulties in understanding its Concepts such as "Props".
What is "Props"?
Every component has something called props. A component’s props is an object. It holds information about that component.
The props stand for properties can be considered as the attributes in HTML element.
They pass data and event handlers down the component tree from the parent to its child component. When this happens, the data that is received through props in the child component becomes read-only and immutable.
"Props" can be accessed by this. props If anything in the parent's props changes, React will make sure that the changes are flown down- stream and will re-render the component tree.
In React, all the data flows only in one direction: from the parent component to the child component. Furthermore, an owner component sets props for other components as in the example below:
In this example. The NewTables component passes the props to the Heading and Rows components. So, we notice that NewTables owns the Headings and Rows components.
Props validation:
React gives a way to validate the props using PropTypes. In order to ensure that the components are used correctly.
How do you define an event handler in React?
Before you pass an event handler you have to define it, it is the same thing as render method. For example:
When you pass an event handler as a prop, there are two names that you have to select:
.The first name is the name of the event handler.
.The second name is the name of the prop.
this.props.children:
component’s props object has a property named children.
this.props.children will return everything in between a component’s opening and closing JSX tags. For example, this.props.children returns everything in between and .
defaultProps:
React also allows us to define some default values for props. This is useful when parent component is passing props based on some condition or not passing some props at all due to some change.
this.props Recap:
These are the things that we have learned in props.
What is props?.
an Owner Component sets props for other components.
There are two names that we have to choose when we pass an event handler as a prop.
The use of this.props.childern.
5.defaultProps.
This is the end of the "props" lesson I hope my article was useful for you to understand react js.Because
the concept of props is very important in react js, Good luck Guys.