React Props

React Props

By Ifeanyi Omeata

Ifeanyi Omeata's photo
Ifeanyi Omeata
·

4 min read

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

ReactReact NativeReactHooksReduxreact router