#1. Hi, Let's talk about React Props. React props helps us to make our components reuseable. We will create contact cards for our example. First, let's setup our index.html file.
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
#2. Next, we will setup our index.js file to render the App components.
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("root"))
#3. Next, we will setup our App.js file to display our contact cards components. We will have 4 cards that are identical because the same information has been used on them. We will change them later on to other people after we introduce props.
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<div className="contact-card">
<img src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
<h3>Andrew Barnes</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 555-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>andrew.barnes@nmail.com</p>
</div>
</div>
<div className="contact-card">
<img src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
<h3>Andrew Barnes</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 555-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>andrew.barnes@nmail.com</p>
</div>
</div>
<div className="contact-card">
<img src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
<h3>Andrew Barnes</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 555-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>andrew.barnes@nmail.com</p>
</div>
</div>
<div className="contact-card">
<img src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
<h3>Andrew Barnes</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 555-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>andrew.barnes@nmail.com</p>
</div>
</div>
</div>
)
}
export default App
Our style.css file:
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
font-family: 'Inter', sans-serif;
background-color: whitesmoke;
}
.contacts {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
.contact-card {
flex-basis: 225px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 13px;
padding-bottom: 20px;
background-color: white;
}
.contact-card > img {
width: 100%;
height: auto;
align-self: center;
border-radius: 5px;
object-fit: cover;
}
.contact-card > h3 {
font-weight: 700;
font-size: 18px;
}
.info-group {
display: flex;
align-items: center;
}
.info-group > img {
height: 11px;
margin-right: 8px;
}
.info-group > p {
margin-block: 3px;
font-size: 12px;
color: #2B283A;
}
The final output should look something like this:
#4. Next, we will create a child component 'Contact.js' that will be applied in within the parent component 'App.js'.
This is the 'Contact.js':
import React from "react"
export default function Contact() {
return (
<div className="contact-card">
<img src="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"/>
<h3>Andrew Barnes</h3>
<div className="info-group">
<img src="./images/phone-icon.png" />
<p>(212) 555-1234</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" />
<p>andrew.barnes@nmail.com</p>
</div>
</div>
)
}
This is the 'App.js':
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<Contact />
<Contact />
<Contact />
<Contact />
</div>
)
}
export default App
The output will still be the same.
#5. Now, we are going to introduce props into our Components so that our child component will display different people's information based on the values of the custom attributes we set on the parent component.
So, lets modify the Contact.js components with prop identifiers (object properties):
import React from "react"
export default function Contact(props) {
return (
<div className="contact-card">
<img className="img-size" 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>
)
}
Now, let's set the parent component App.js with the prop attributes which have the new values.
import React from "react"
import Contact from "./Contact"
function App() {
return (
<div className="contacts">
<Contact
img="https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
name="Andrew Barnes"
phone="(212) 555-1234"
email="andrew.barnes@nmail.com"
/>
<Contact
img="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
name="Watkins Drewmore"
phone="(212) 555-2345"
email="watkins.drewmore@nmail.com"
/>
<Contact
img="https://images.unsplash.com/photo-1509474407907-efe008ca4184?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3w0NjEwOTYxfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
name="Felicia Thomas"
phone="(212) 555-4567"
email="felicia.thomas@nmail.com"
/>
<Contact
img="https://images.unsplash.com/photo-1496360784265-52a2509684f3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
name="Sherry Anne"
phone="(0800) CAT KING"
email="sherry.anne.com"
/>
</div>
)
}
export default App
So, the final output show now look like this:
#End
Hope you enjoyed this! :) Follow me for more contents...
Get in Touch:
ifeanyiomeata.com
contact@ifeanyiomeata.com
Youtube: youtube.com/c/IfeanyiOmeata
Linkedin: linkedin.com/in/omeatai
Twitter: twitter.com/iomeata
Github: github.com/omeatai
Stackoverflow: stackoverflow.com/users/2689166/omeatai
Hashnode: hashnode.com/@omeatai
Medium: medium.com/@omeatai
© 2021