Higher Order Component (HOC) - promoted tag

• 🚀 Higher Order Components

  • input is component and output is (modified) component

// FileName: 📂Restaurant Card
const RestaurantCard = ({ data }) => {
....
....
}
export const withPromotedLabel = (RestaurantCard) => {
    return (props) => {
        return (
            <div className='relative'>
                <RestaurantCard {...props} />
                <p className='absolute top-0 right-0 bg-teal-300'>Promoted</p>
            </div>
        )
    }
}

export default RestaurantCard;

import RestaurantCard, { withPromotedLabel } from "../components/RestaurantCard";
import { useEffect, useState } from "react";

const RestaurantCardPromoted = withPromotedLabel(RestaurantCard);
...
...

renderResList.map((data) => (
    (false) ? <RestaurantCard key={data.id} data={data} /> 
        : <RestaurantCardPromoted key={data.id} data={data}  />
))