Ads Top

How to create a repeat box in react?

React repeat content-box example: If you want to create a box and repeat again and again but not same content then we need to create a component code as below:

banksbox.js
import React from 'react'
import {Imagefrom 'react-bootstrap'
import {Linkfrom 'react-router-dom'

export default (props=> {
        
    return (
        <>
            <div className="cardBox">
                <div className="cardImg"><Link to={props.bankHref}><Image src={props.bankLogo} fluid /></Link></div>
                <div className="cardBody">
                    <h4>{props.bankName}</h4>
                    <div>Customer Care No.: <strong>{props.bankCustomerCare}</strong></div>
                </div>
            </div>
        </>
    )
}

home.js
import React from 'react'
import Banksbox from '../../components/banksbox/banksbox'
var images = require.context('../../assets/images')

export default () => {
    
    const allbankDetails = {
        banklist : [
        {bankLogo:'./icicilogo.jpg'bankHref:'bankdetails'bankName: 'Icici Bank'bankCustomerCare:'1800 254 2543'},
        {bankLogo:'./sbiLogo.png'bankHref:'sbibank'bankName: 'SBI Bank'bankCustomerCare:'8966 254 2543'},
        {bankLogo:'./centralBankLogo.png'bankHref:'centerralbank'bankName: 'Centeral Bank'bankCustomerCare:'3215 254 0000'}
        ]
    }

    const renderallbankDetails = () => {
        return allbankDetails.banklist.mapitem => <Banksbox bankLogo={images(item.bankLogo)} bankHref={item.bankHref} bankName={item.bankName} bankCustomerCare={item.bankCustomerCare} />)
    }
    
    return (
        <>
            <div className="welcomeMash">
                <h1>Welcome to ATM Mash</h1>
                <hr />
                <div className="cardwelmash">
                    {renderallbankDetails()}
                </div>
            </div>
        </>
    )
}

And folder structure (you can create as you wish) would be as the screenshot:

You will find the result as given below:


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.