Props (properties) in React Component tut 7

# Props (properties) in React Component

• We can create custom attribute/property for our jsx component
• Each instance of jsx component must have unique id.
• which we can assign by using jsx reserved props " key = <unique id> "
• key can be integer , string or character or mix.
• we have pass "props" as an object to the method where jsx component is define.

      #index.js

import React from "react"

import ReactDOM from "react-dom"

import './index.css'

import Card from './Cards'

import Cdata from './CardData';

ReactDOM.render(

  <>

  <h1 className="heading_style">List Of UNknown Pictures</h1>

  {Cdata.map((val)=>{

    return(

      <Card 

       key = {val.id}

      imgUrl={val.imgUrl}

      category= {val.category}

       title= {val.title}

       btnLink={val.btnLink}

     />

    )

  })} 

  </>

  ,

  document.getElementById('root')

);

     #Card.jsx

import React from 'react';

function Card(props)

{

    return(

        <>

         <div className="cards">

             <div className="card">

                 <img src={props.imgUrl} alt="My pics" className="card_img"/>

                 <div className="card_info">

                     <span className="card_category">{props.category}</span>

                     <h3 className="card_title">{props.title}</h3>

                     <a href={props.btnLink} target="_blank">

                         <button> Watch Now</button>

                     </a>

                 </div>

             </div>

         </div>

        </>

    )

}

export default Card;    

# CardData.jsx

const Cdata = [

    {

        id: 1,

        imgUrl:"https://picsum.photos/250/200",

        category: "pics from heart",

        title: "unknown",

        btnLink: "javascript:void(0)"

    },

    {

        id: 2,

        imgUrl:"https://picsum.photos/300/200",

        category:"pics from Brain",

        title: "Don't Known",

        btnLink: "javascript:void(0)"

    },

    {

        id: 3,

        imgUrl:"https://picsum.photos/250/300",

        category: "pics from GAllery",

        title: "IDK",

        btnLink: "javascript:void(0)"

    }

]

export default Cdata;

# Explanation :-

• In File CardData.jsx, it contain the list of objects which act as a properties of jsx component.
• We can access the property/attribute of 'Card jsx component ' using "props" object.
• We are using "map method " for displaying each part of list customisly and automatically.
• We are fat arrow function instead of normal method.