A Parent Component Could Access or Read Its Children Components Properties
Typically, React applications are composed of many smaller components. In React, this tin be everything, starting with a button, up to an entire form or page. Given the following word definition bill of fare, for instance, we might want to suspension it downwardly into smaller components.
The React component of that card looks like this:
1 const Card = ( ) => {
2 render (
3 < div className = "box" >
iv < h1 className = "title" > react < / h1 >
five < p className = "category" > verb < / p >
6 < p >
seven 1. act in response to something ; respond in a detail fashion .
8 "he reacted angrily to the news of his dismissal"
9 < / p >
10 < / div >
11 ) ;
12 }
You lot tin can check out the entire code on this codepen.
This construction is fine if yous only desire to show 1 carte, only what happens when you want to brand this component reusable?
This is where React'south props come into play.
What are "props" in React?
Props is a mutual keyword in React, which is short for property.
They are to React components what arguments are to functions.
1 office sum ( a , b ) {
two return a + b ;
three }
The variables a and b are the arguments of that office.
The syntax of props in JSX (the syntax extension to JavaScript that is commonly used in React), is only very similar to the syntax of HTML properties, accepting cardinal-value pairs inside the tag.
1 < script src = " /index.js " > </ script >
In this case, src is a property with the value /index.js.
In React, nosotros tin ascertain props with a similar syntax:
1 < Component central = { value } / >
Annotation the curly braces around value. Everything inside those braces volition be interpreted every bit JavaScript, which allows united states to pass down variables and objects likewise.
If your value happens to exist a cord, yous tin too employ the HTML syntax like this:
1 < Component key = "value" / >
Just like in functions y'all can't pass arguments to the caller, yous tin can only pass props from a parent to a child component.
It's important to note that props are read-just, which means they shouldn't be modified by the child component.
How to use React props
Passing props from the parent to the child component
Let's have a look at the example from above once more. We have a Carte du jour component, which renders the definition of the word react. We at present desire to make this component reusable.
We start by replacing the hardcoded values of the component with variables.
ane const Card = ( ) => {
2 const bill of fare = {
3 title : 'react' ,
four category : 'verb' ,
5 definition : `
6 1. act in response to something; reply in a particular manner.
vii "he reacted angrily to the news of his dismissal"
eight ` ,
9 }
10
11 return (
12 < div className = "box" >
13 < h1 className = "title" > { carte . title } < / h1 >
fourteen < p className = "category" > { carte du jour . category } < / p >
fifteen < p >
16 { card . definition }
17 < / p >
18 < / div >
xix ) ;
xx }
I decided to store the values in 1 object instead of multiple variables. You can do information technology either way.
The next footstep is to movement the variables to the parent component and pass it down equally a prop.
one const App = ( ) => {
2 const bill of fare = {
3 title : 'react' ,
iv category : 'verb' ,
v definition : `
six i. act in response to something; respond in a particular mode.
seven "he reacted angrily to the news of his dismissal"
viii ` ,
9 } ;
ten
11 render (
12 < Carte du jour carte du jour = { card } / >
thirteen ) ;
xiv }
Note how we wrap the variable in curly brackets.
Accessing props in the child component
The final step is to admission the props in the child component.
In function components, we access the props through the start part argument. Since nosotros called our new prop card, we can access information technology through props.carte.
1 const Card = ( props ) => {
2 const card = props . card ;
3
iv render (
5 < div className = "box" >
vi < h1 className = "title" > { card . championship } < / h1 >
7 < p className = "category" > { card . category } < / p >
8 < p >
ix { card . definition }
10 < / p >
xi < / div >
12 ) ;
xiii }
If nosotros were using grade components, we could access it through this.props.card.
1 grade Card extends React . Component {
2 render ( ) {
3 const card = this . props . card ;
four return (
v < div className = "box" >
six < h1 className = "title" > { menu . championship } < / h1 >
vii < p className = "category" > { card . category } < / p >
8 < p >
ix { carte . definition }
10 < / p >
11 < / div >
12 ) ;
13 }
14 }
With this new construction in place, nosotros tin hands add together more cards without rewriting whatever code.
1 const App = ( ) => {
2 const reactCard = {
three championship : 'react' ,
four category : 'verb' ,
5 definition : `
6 one. human action in response to something; respond in a item manner.
7 "he reacted angrily to the news of his dismissal"
8 ` ,
nine } ;
x
11 const nodeCard = {
12 title : 'node' ,
13 category : 'noun' ,
14 definition : `
fifteen 1.
xvi a point in a network or diagram at which lines or pathways intersect or co-operative.
17 ` ,
eighteen } ;
19
twenty return (
21 < div >
22 < Card bill of fare = { reactCard } / >
23 < Card card = { nodeCard } / >
24 < / div >
25 ) ;
26 }
This is how information technology looks like:
Why should we use props?
If you showtime a React application, you need to apply props at some point or another, unless you only want to use one component (which in theory is possible).
Structuring your application in a fashion that allows you lot to reuse components will make maintaining the application and adding new features much easier.
In real-life applications that are under constant development, components inevitably grow over time. Withal, when y'all go to a point where you need to reuse parts of that component, you tin refactor the lawmaking and create more reusable components out of one, just like nosotros did in the case above.
Keeping the codebase readable and loosely coupled is an ongoing effort, but React simplifies this for us with its component-based approached.
A special example: The "children" prop
Before we wrap this up, there'southward one more matter I want you to know almost: The children prop.
This is a special one since it's e'er available without explicitly passing it down. It allows us to write components that wrap effectually others.
In the example above, we might want to add a wrapper component with a headline:
1 const Wrapper = ( props ) => {
two render (
3 < div >
4 < h1 > Definitions < / h1 >
5 { props . children }
6 < h1 > - < / h1 >
7 < / div >
8 ) ;
9 }
We can only put props.children where we want the children to appear.
In our App component, we then apply this wrapper similar that:
1 const App = ( ) => {
2 const reactCard = {
3 championship : 'react' ,
iv category : 'verb' ,
5 definition : `
6 i. act in response to something; reply in a particular style.
vii "he reacted angrily to the news of his dismissal"
8 ` ,
9 } ;
10
11 const nodeCard = {
12 title : 'node' ,
thirteen category : 'substantive' ,
14 definition : `
15 1.
xvi a indicate in a network or diagram at which lines or pathways intersect or branch.
17 ` ,
eighteen } ;
19
20 return (
21 < Wrapper >
22 < Card card = { reactCard } / >
23 < Card card = { nodeCard } / >
24 < / Wrapper >
25 ) ;
26 }
Determination
I promise that this article made y'all understand this concept a little better. Feel gratuitous to play around with the codepen I created by adding more backdrop to the Card element.
React's way of treatment data can be quite different from other frameworks, simply once you become used to it, the component-based architecture tin can become a very powerful tool.
Observability for Production React Apps
Debugging React apps in product may be challenging and time consuming. OpenReplay is an open-source session replay stack for developers. It helps you replay everything your users practice and shows how your app behaves and renders for every consequence. Information technology's like having your browser's inspector open up while looking over your user'south shoulder.
OpenReplay helps to quickly get to the root crusade by reproducing issues equally if they happened in your own browser. It as well monitors your frontend functioning past capturing fundamental metrics such as folio load fourth dimension, memory consumption and slow network requests besides as Redux actions/land.
Happy debugging, for modernistic frontend teams - Commencement monitoring your web app for costless.
Source: https://blog.openreplay.com/how-to-use-props-to-pass-data-to-child-components-in-react-js/
0 Response to "A Parent Component Could Access or Read Its Children Components Properties"
Post a Comment