ReactJS: Passing Props
Properties in React are immutable, read-only objects used to pass down data from a parent to its child component. Props facilitate the transfer of a piece of state or functionality you wish to make accessible to a sub component down the hierarchy. Syntactically, props resemble the way attributes are written in HTML. The difference being that the value of a prop is assigned to a JSX tag.
React is a component-based UI library that uses props as a means of directing data to an apportioned section of the application. It may be helpful to think of a prop like a mailbox. In the real-world, a mailbox is a container that stores physical structures in the form envelopes and packages. Envelopes hold information like letters, bills or if you’re lucky, money. In React, a prop can similarly store a variety of JavaScript data-structures including — but not limited to — primitive data-types, arrays, objects and functions.
Operationally, the child component takes on the form of a house which the mailbox belongs to. When the parent component — the mailman — wants to pass data — a letter — down to a child, it adds the specified content into the rendering components corresponding prop — mailbox.
Passing props to a rendering component is no different from that of arguments to a function. It’s important to reiterate the notion that props are immutable, meaning they cannot — themselves — be modified. The value stored inside however, can.
Since React is built on top of JavaScript, there are a variety of ways to write the syntax in the examples below. It ultimately depends on which version of JS or React you are using. Though I am running the current version of both, I chose to be more explicit so that you can better visualize what is happening.
Passing a String as a Prop
App.jsx
http://localhost:3000
App.js is the parent component. It currently has no state declared and even so, no child component to pass it to.Let’s see what passing down a prop looks like from a parent component to it’s child.
Passing A Prop
App.js
Now App.js has some state defined with a key of name set to the value of a string — "Chris Kakos". On line 17, the parent is passing a prop — which is appropriately called name — down to its child component and setting the value of it to the current state — this.state.name— inside of JSX tags.
Receiving A Prop
ChildComponent.js
ChildComponent.js is a functional component written in ES6 syntax. It is important to understand that props are sent down from the parent as an object. When a child component receives props, it can access them by using the identifer appropriately name props. Therefore, any prop passed down can be accessed with dot notation, starting with propsfollowed by the name of the prop you wish to access — in this case name— as demonstrated on line 11.
http://localhost:3000
Passing a Function as a Prop
App.js
A more intermediate example would be to pass down some state as well as functionality that modifies state. First thing is to declare a piece of state to modify. In this case, I decided to create a counter that increments by 1. On Line 11, I set a key named count to a value of 0. Next I have to create the functionality that is going to modify the current value of count.
On Line 15, I wrote an ES6 arrow function. I start by making a copy of the current state of count — it is not recommended to directly modify state. I then set the state to increment by 1 every time increment() is invoked.
Now that the functionality has been built, I use some ES6 to demonstrate the destructuring of two variables — Line 23 — and pass the current state of them, as well as my newly built functionality, into the ChildComponent as props.
ChildComponent.js
The props are received the same as the previous example only this time, I need a way to invoke increment() in order to modify the current state of count. To achieve this — on Line 19 — I added a button with an onClick Event Handler that will invoke increment() each time the button is clicked, ultimately modifying the current state of count.
http://localhost:3000
*CLICK*
*CLICK*
*CLICK*
Conclusion
Props play a vital role in making code more modular. This was a quick demonstration to illustrate how to get started. There is a lot more complex was to use props that really optimize the functionality. I hope this has been a good starting point. For further information and examples, look no further than the official React documentation.
Onward.
