Understanding the React Props
Introducing to the props and using them for dynamic output.
Props are an important concept to understand in React. You use props to pass data and values from one component to another to get dynamic and unique outputs. Websites like YouTube and Netflix use the same design patterns across many sections having different data.
What are React Props?
In React, props are inputs that you pass into the components. Props are an acronym for "properties." Props are a way to pass data from a parent component to a child component. They are used to make components reusable and dynamic.
As I said in the introduction, the concept of props builds on components. So we can't successfully work with props without having a component to work with. HTML attributes are used to pass props to components.
Below is the structure of the parent component (i.e. App.jsx)
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<Contact />
</div>
);
}
export default App
Below is the structure of the child component (i.e. Card.jsx)
import React from "react"
function Contact() {
return (
<div className="contact-card">
<img src="./images/loremipsum.png"/>
<h3>lorem.ipsum</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 777-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>lorem@ipsum.com</p>
</div>
</div>
);
}
export default Contact
Our goal is to be able to display all the different contact-card which vary in information, appearance and description to users.
Here, we can reuse the Contact component as many times as we want by just re-rendering the component. For example:
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<Contact />
<Contact />
<Contact />
<Contact />
</div>
);
}
export default App
The React functionality of repeating a particular card without writing much code is evident.
But we still haven't accomplished our goal, right? While we want to reuse the component, we also want to update the name of the person, number, email and image without having to hardcode any data in the Conatct.jsx component.
This is where we can use props in React to make our data output dynamic.
How to Use React Props
It is important to keep in mind that React uses a one-way data flow. This means that data can only be transferred from the parent component to the child components. Also, all the data passed from the parent can't be changed by the child component.
This means that our data will be passed from App.jsx which is the parent component to Contact.jsx which is the child component (and never the other way).
How to Send Props into a Component
The process of passing props into a component in React can be likened to how attributes work in HTML elements.
For example, when you want to pass attributes into an input element in HTML, you will write the attribute and attach the value of the attribute to it, just like this:
<input type="text" placeholder="lorem ipsum" />
When sending props, which are similar to attributes and properties, you can attach values to them.
Below is the syntax:
<ComponentName property1="value" property2="value" property3="value" />
Assigning a value to each property is done within the component tag after specifying the component name.
Now let's use the syntax above to pass data into the App.jsx component:
<Contact
img="./images/loremipsum.png"
name="lorem.ipsum"
phone="(212) 777-1234"
email="lorem@ipsum.com"
/>
In the code above, the component name within the tag is Contact, and the first property or prop is img with its value loremipsum.png attached to it. Then we have name which is the second property and phone and email which is the third and fourth property respectively (these are also assigned values).
On structuring the App.jsx component properly, it will now look like this:
import React from "react"
/* Challenge:
- Create a Contact.js component in another file
- Move one of the contact card divs below into that file
- import and render 4 instances of that contact card
- Think ahead: what's the problem with doing it this way?
*/
function App() {
return (
<div className="contact-card">
<img src="./images/loremipsum.png"/>
<h3>lorem.ipsum</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 777-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>lorem@ipsum.com</p>
</div>
</div>
);
}
export default App
There exists a subtle distinction between crafting HTML attributes and sending props into components. Unlike HTML attributes, which are predefined keywords, working with props in React involves crafting and specifying them yourself.
For instance, in the previous example, I established properties such as 'img', 'name', 'phone' and 'email'. Subsequently, I associated corresponding values with each of these props.
How to Access and Use Props in React
The component receives props as a function parameter. It uses the value of props by defining the parameter as props objects.
Below is the syntax:
import React from "react"
function Contact(props) {
return (
<div className="contact-card">
<img src={props.objectName}/>
<h3>{props.objectName}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>{props.objectName}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>{props.objectName}</p>
</div>
</div>
);
}
export default Contact
Let's relate the syntax above to our Contact.jsx by receiving props as a parameter function and by defining props as object:
import React from "react"
function Contact(props) {
return (
<div className="contact-card">
<img src={props.img}/>
<h3>{props.name}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>{props.phone}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>{props.email}</p>
</div>
</div>
);
}
export default Contact
We have successfully made the data we passed into the Product.js component dynamic.
To reuse the Contact.jsx component to show the data of other products, all we need to do is to attach the new data or values when re-rendering the component.
Below is the syntax for this:
<ComponentName property1="valueA" property2="valueB" property3="valueC" />
<ComponentName property1="valueD" property2="valueE" property3="valueF" />
<ComponentName property1="valueX" property2="valueE" property3="valueZ" />
Let's try to relate the above syntax to our App.jsx:
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<Contact
img="./images/loremipsum.png"
name="lorem.ipsum"
phone="(212) 777-1234"
email="lorem@ipsum.com"
/>
<Contact
img="./images/loremgibsum.png"
name="lorem.gibsum"
phone="(212) 777-5678"
email="lorem@gibsum.com"
/>
<Contact
img="./images/loremtipsum.png"
name="lorem.tipsum"
phone="(212) 777-9012"
email="lorem@tipsum.com"
/>
<Contact
img="./images/loremyibsum.png"
name="lorem.yibsum"
phone="(212) 777-3456"
email="lorem@yibsum.com"
/>
</div>
);
}
export default App
The live output of the aforementioned code showcases individualized images, names, and descriptions for each product being displayed.
Destructuring Props
Having reached our desired functionality, let's refine Contact.jsx using destructuring. This JavaScript feature assigns data from objects or arrays to distinct variables, enhancing data management.
Props function as objects in React. When deconstructing objects, the initial step involves enclosing properties within curly braces. You can subsequently store them in a props variable within the function's scope or directly pass them as function parameters.
Now, receive the properties where you need them by specifying their names without the prefix props.
Types of Destructuring Props in React
- Destructuring within Function Parameter:
import React from "react"
//First Step: Destructuring within function's parameter
export default function Contact({img, name, phone, email}) {
return (
//Second Step: receive the properties where you need them by stating the names
<div className="contact-card">
<img src={img}/>
<h3>{name}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>{phone}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>{email}</p>
</div>
</div>
);
}
- Destructuring within the body of the function
import React from "react"
function Contact = (props) => {
//First Step: Destructuring within the body of the function
const {img, name, phone, email}
return (
//Second Step: receive the properties where you need them by stating the names
<<div className="contact-card">
<img src={img}/>
<h3>{name}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>{phone}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>{email}</p>
</div>
</div>
);
}
export default Contact
Utilizing destructuring in React enhances code readability and conciseness. It's worth noting that both demonstrated methods of destructuring will consistently yield identical outputs.
I hope this blog was helpful to you and the upcoming blog will cover the concepts of passing objects and spreading objects as props.
Thanks for Reading.