Skip to main content
HashnodeIfeanyi Omeata's BlogIfeanyi Omeata's Blog

Command Palette

Search for a command to run...

React Props

By Ifeanyi Omeata

Updated
•4 min read
React Props
I
Ifeanyi Omeata

Hi, I am a Software Developer of 3-4 years specialising in React, Javascript, Node, NextJS, Express, Python, Django, Fast API, SQL and a few other technology stack, with a good background in Networking and Cloud Infrastructure. I am working to become a DevOps Solutions Engineer and happily married to my long time girlfriend.

Part of seriesLEARN JAVASCRIPT/REACT/NODE

#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>

image.png

#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"))

image.png

#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

image.png

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;
}

image.png

The final output should look something like this:

image.png

#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>
    )
}

image.png

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

image.png

The output will still be the same.

image.png

#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>
    )
}

image.png

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

image.png

So, the final output show now look like this:

image.png

#End

Hope you enjoyed this! :) Follow me for more contents...

Get in Touch:
www.ifeanyiomeata.com
contact@ifeanyiomeata.com

Youtube: https://www.youtube.com/c/IfeanyiOmeata
Linkedin: https://www.linkedin.com/in/omeatai/
Twitter: https://twitter.com/iomeata
Github: https://github.com/omeatai/
Stackoverflow: https://stackoverflow.com/users/2689166/omeatai
Hashnode: https://hashnode.com/@omeatai
Medium: https://medium.com/@omeatai
© 2021

#reactjs#react-native#reacthooks#redux#react-router
10 views

Comments

Join the discussion

No comments yet. Be the first to comment.

LEARN JAVASCRIPT/REACT/NODE

Part 4 of 10

Learn Javascript, React and Node the easy way!..... JAVASCRIPT | REACT | NODE | NEXTJS | MONGODB | EXPRESS

Up next

React Class Styles

By Ifeanyi Omeata

More from this blog

I

Ifeanyi Omeata's Blog

78 posts

Software Developer