What is Props
For ease of understanding of props, let's try to refresh what we know about function parameters and arguments. Parameters are the listed variables within the brackets () during the function definition
function Example (param1, param2){
return param1 * param2
}
Here param1 and param2 are the function parameters.
Arguments are the values of the parameters. That are seen on function calls
Example (3, 4)
// Output becomes 12
On calling the Example function,we pass in the arguments 3 and 4. Now that we have gotten a hang of parameters and argument let's dive in to props in REACT☺️☺️
Props which is a shortened form for property is basically an object that follow the immutability concept (this means that it's value cannot be changed) it serves as a communicating tool between components. Props === Function parameters.
Let's say we have a Book component
function Book(props)
{
console.log(props)
return <p> Hi, I am {props} </p>
}
Then on rendering
function App()
{
return <Book/>
}
We will have an object as the output
//Output
Object{}
Accessing Props
For every object there are key-value pairs,so we could say that the key is the props name and value as the props value. Using our initial example
function App(){
return <Book job = "developer" gender = "female" >
}
Here job and gender becomes our prop name while developer and female is our prop value.
We pass in the props argument where we are rendering/using it not where we are setting it up. In this case we are rendering it in the App component
function Book (props) {
return (
<div>
<p> I am a {props.job} </p>
<p> My gender is {props.gender}</p>
</div>
)
}
// Output
I am a developer
My gender is female
Here we are accessing the value of the props name job and gender.
There are other ways of accessing props apart from the generic "props." and this comes in handy when we are accessing lots of props values. That is where Destructuring plays a fantastic role ☺️
Destructuring Props
// method 1
function Book (props)
const {job, gender} = props
{
return (
<div>
<p> I am a {job} </p>
<p> My gender is {gender}</p>
</div>
)}
// method 2
function Book ({job, gender})
{
return (
<div>
<p> I am a {job} </p>
<p> My gender is {gender}</p>
</div>
)}
Using the normal JavaScript object destructing we have made our communication so much easier ✈️✈️
We assigned our props names to the props attribute in method 1
while destructing it in the parameter in method 2.
Both ways would work and still have the same output.
To the next question ☺️ What if we are rendering more than one similar component but we would love to apply some changes to the first similar component 🤔🤔 ? that's when we need props- children attribute.
Props.children
children is anything that is rendered in between the component closing tag.
Component can be self closing or not self closing. For instance,in my app function I would love to render two book component but add a slight change to one of them.
//add another text to the second book component.
function App (){
return (
<>
<Book job = "developer" gender = "female" />
<Book job = "developer" gender = "female" >
<p> I love healthy eating
habits</p>
</Book>
</>
)
}
// On the book component,we can use any destructing approach and use the children attribute anywhere.
const Book =({job, gender, children})=>{
return (
<div>
<p> I am a {job} </p>
{children}
<p> My gender is {gender}</p>
</div>
)
}
//Output
I am a developer
My gender is female
I am a developer
I love healthy eating habits
My gender is female
Let's dive into the next question ☺️ What if we would love to render same components but with different attributes ? Instead of statically creating attributes for each of the components to be rendered we could use the **map method **to dynamically create them. Awesome right!!💃💃
Using map
Map is an array method,it iterates over a list and returns array items individually
Back to our example
function App ()
{
// our array of object
const arrays = [
{
id : 1,
tittle : "I am a developer",
gender : "female"
},
{
id : 2,
tittle : "I am a nurse",
gender : "female"
},
{
id : 3,
tittle : "I am a Programmer",
gender : "male"
}
]
return (
<section>
{arrays.map( (item) =>{
return <Book key = {item.id}
item = {item} />
})
}
</section>
)
Key Props
To avoid re-rendering a list every time their is a particular change, update or delete action on one of its item, React uses a unique identifier called Key to identify the particular item that changed and re-render it without re-rendering the whole List, This improves overall performance.
Notice in our previous example we passed in the key props and assigned the (item.id) values to it. The key which in our case has values of (1,2,3) serves as a unique identity for each mapped item in the array. We would have used the indexes of the array item as the key but that's not ideal because we might want to perform operations on the list like(filtering, sorting etc) which could change the indexes thereby breaking the unique property of Key. It is therefore very important that the key always remains unique, otherwise there is a good chance React will mix up the elements and mutate the incorrect one.
How then do we access the item property in our component
// here we are not Accessing the props but the item object
const Book =(props )=>{
const { gender, tittle } = props.item
return (
<div>
<p> {tittle} </p>
<p> My gender is {gender}</p>
</div>
)
}
props and spread operator(...)
What is spread operator? This takes in an iterable (e.g an array) and expands it into individual elements. The spread operator is commonly used to make shallow copies of JS objects. Eg
const a = [1,2,3,6]
const b = [7,8,9]
const c = [...a , ...b]
console.log(a)
// 1,2,3,6
console.log (b)
// 7,8,9
console.log(c)
// 1,2,3,6,7,8,9
Now that we have understood spread operator,we will be using it in our initial example to make our codes concise and more readable.
function App ()
{
// our array of object
const arrays = [
{
id : 1,
tittle : "I am a developer",
gender : "female"
},
{
id : 2,
tittle : "I am a nurse",
gender : "female"
},
{
id : 3,
tittle : "I am a Programmer",
gender : "male"
}
//We want to spread out all the properties we are getting from item into separate properties.
return (
<section>
{arrays.map( (item) =>{
return <Book key = {item.id} {...item} />
})
}
</section>
)}
We can now access it like this
We removed the book because we are no longer accessing the book property as an object.
// method 1
function Book ( props ){
const { gender, tittle } = props
return (
<div>
<p> {tittle} </p>
<p> My gender is {gender}</p>
</div>
)
}
// method 2
function Book ({ gender, tittle } ){
return (
<div>
<p> {tittle} </p>
<p> My gender is {gender}</p>
</div>
)
}
//output
I am a developer
My gender is female
I am a Nurse
My gender is female
I am a Programmer
My gender is male
We have covered the basics of React props here 💃,now go create some projects with the knowledge gained ☺️. Do use the comment section for further questions and clarifications.
Also check out John Smilga react course youtu.be/4UZrsTqkcW4 for more information.