props in react

We all know what are the components in react. A component is just like a JavaScript function which helps in building the UI of a page.

Now suppose you built a product called 'Twitter' and you want to show it on your portfolio that you have built this product. So you are showing it as a card.

So you made a Card component for rendering your product information card.

Let's say you are displaying 3 information about your product on the card which are-

-> an image (img)

-> name of the product (h2)

-> some details (p)

export default Card(){
    return(
        <div>
            <img src="./image/twitter.jpg"></img>
            <h2> Twitter </h2>
            <p> It is the microblogging platform </p>
        </div>
    )
}

This is your card component which is displaying your product 'Twitter'.

It's all fine until you want to show only one product. Now suppose you built 2 more products called 'Facebook' & 'YouTube' and you want to show them too on the same section and as the same card form so will you make separate Card1 or Card2 components for them? suppose you want to show the information of thousand students then will you build thousand different components? Absolutely NO.

Since you want to show the other 2 products as same as 'Twitter' so you can REUSE the card component and its where the Props come into play.

-> Props are just like arguments to a function that we pass to our component.

-> Props are JavaScript objects which hold different properties about the information that we want to show through our component.

-> We can pass any number of parameters while calling a component and the component will receive them as a JavaScript object called props.

-> You can give any suitable name to the pros but since these are properties of something so we call them props.

How to use props

Passing Props

import React from 'react'
import Card from './Card'

export default App(){
    return(

        <Card
        name="Twitter"
        src="./images/twitter.jpg"
        about="Microblogging platform"
        />

        <Card
        name="Youtube"
        src="./images/youtube.jpg"
        about="Global online video sharing and social media platform"
        />

        <Card
        name="Facebook"
        src="./images/facebook.jpg"
        about="Share what you love with who you love"
        />
    )
}

The above App() component will call the Card component 3 times with different product details.

Using Props

export default function Card(props){
    return(
        <div>
            <img src={props.src}></img>
            <h2>{props.name}</h2>
            <p>{props.about}</p>
        </div>
    )
}

The App() component will call the Card() component 3 times. First, it will pass the details of the 'Twitter' product, then render it and come back; then it will again call the Card with the details of 'Youtube', render it, and come back; then it will again call with the details of 'Facebook', render it and come back; then there is no more calling so it will return from the App().

This was for 3 products, now suppose you want to show the detail of thousand students then will you pass the argument 100 times? No.

Now we can create a separate file for storing the details of 100 students as an array of objects, import it into the App() component, and then we can use a JavaScript map() for passing them to a component, store them in an element and render that element. Let's see how-

//assume the file name is Students.js
export default [
    {
        name:"Raju",
        age:32,
        img:"./images/raju.jpg"
    },

    {
        name:"Shyam",
        age:35,
        img:"./images/shyam.jpg"
    },

    {
        name:"Babu Rao",
        age:51,
        img:"./images/babu.jpg"
    },
    {}
    {}
    {}
    {}
    .
    .
    .
    100 
]

import Card from './Card'
import Students from './Students'

function App(){

    const studentsDetails=Students.map(student=>{
        return(
                <Card 
                name={student.name}
                age={student.age}
                src={student.src}
                />
            )
        })

    return(
        {studentsDetails}
    )
}

So it's all good now but suppose we have a lot of details about every student like - name, age, address, roll, ph number, birthdate, height, weight, and more. so if we pass all the data like above then we have to again write all the details for passing as prop.

For getting rid of this problem, we can pass a single parameter as an object and then use it in the component

//in the app- 
    const studentsDetails=Students.map(student=>{
        return(
                <Card 
                 student={student}
                />
            )
        })

//in the component
<h1>props.student.name</h1>

Recap

Props are like arguments to a function that we can pass while calling a function.
They are in the form of JavaScript functions.
Props make our React component reusable.
We can pass the details of the item as a JavaScript object to the component and use them in the component.
We can use the JS map() to pass details if we have lots of data.

Thats it for now, bye 👋

Props In React

Table of contents

How to use props

Passing Props

Using Props

Recap