Map through a 2 different components but differentiating them with their types

Question

I have finished the frontend design.. Now integrating the backend, I came across this issue Here is the demo website

I hard coded the components. Now I want to map through but all rendered components are <FeaturedProject/>

Please any help is appreciated, even a hint will be great

Thank you, yusuf

The components are


const FeaturedProject = ({type, title, summary, img, link, dribbble}) => {
  return (
    <article className='flex w-full items-center justify-between rounded-3xl border border-solid border-dark bg-light dark:bg-dark dark:border-light 
    shadow-2xl p-12 relative rounded-br-2xl lg:flex-col lg:p-8 xs:rounded-2xl xs:rounded-br-3xl xs:p-4'>
        <div className='absolute top-0 -right-3 -z-10 w-[101%] h-[103%] rounded-[2.5rem] bg-dark dark:bg-light rounded-br-3xl
        xs:-right-2 sm:h-[102%] xs:w-full xs:rounded-[1.5rem]'/>
                  
        <Link href={link} target='_blank' className='w-1/2 cursor-pointer overflow-hidden rounded-lg lg:w-full' >
            <FramerImage src={img}  sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw' priority
            alt={title} className='w-full h-auto' whileHover={{scale: 1.05}} transition={{duration:0.2}} />
        </Link>
        <div className='w-1/2 flex flex-col items-start justify-between pl-6 lg:w-full lg:pl-0 lg:pt-6'>
            <span className='text-xl text-primary dark:text-primaryDark font-medium xs:text-base'>{type}</span>
            <Link href={link} target='_blank' className='hover:underline underline-offset-2' >
                <h2 className='my-2 w-full text-left text-4xl font-bold sm:text-sm'>{title}</h2>
            </Link>
            <p className='my-2 font-medium text-dark dark:text-light sm:text-sm'>{summary}</p>
            <div className='mt-2 flex items-center' >
                <Link href={dribbble} target='_blank' className='w-10' ><DribbbleIcon /></Link>
                <Link href={link} target='_blank' 
                  className='p-2 px-6 text-lg ml-4 rounded-lg bg-dark text-light dark:bg-light dark:text-dark font-semibold sm:px-4 sm:text-base' >
                  Visit Project
                  </Link>
            </div>
        </div>
    </article>
  )
}
const Project = ({type, title, img, link, dribbble}) => {
  return (
    <article className='flex flex-col w-full items-center justify-between rounded-2xl border border-solid border-dark bg-light dark:bg-dark dark:border-light shadow-2xl p-6 relative xs:p-4'>
        <div className='absolute top-0 -right-3 -z-10 w-[101%] h-[103%] rounded-[2rem] bg-dark dark:bg-light 
        xs:-right-2 md:w-[101%] xs:h-[102%] xs:rounded-[1.5rem]'/>
                  
        <Link href={link} target='_blank' className='w-full cursor-pointer overflow-hidden rounded-lg' >
            <FramerImage src={img} alt={title} className='w-full h-auto' whileHover={{scale: 1.05}} transition={{duration:0.2}} />
        </Link>
        <div className='w-full flex flex-col items-start justify-between mt-4'>
            <span className='text-xl text-primary dark:text-primaryDark font-medium lg:text-lg md:text-base'>{type}</span>
            <Link href={link} target='_blank' className='hover:underline underline-offset-2' >
                <h2 className='my-2 w-full text-left text-4xl font-bold lg:text-2xl'>{title}</h2>
            </Link>
            <div className='w-full mt-2 flex items-center justify-between' >
                <Link href={link} target='_blank' className='text-lg font-semibold underline md:text-base' >Visit</Link>
                <Link href={dribbble} target='_blank' className='w-8 md:w-6' >
                    {" "}<DribbbleIcon />{" "}
                </Link>
            </div>
        </div>
    </article>
  )
}

Here is the design code

    import React from 'react'
import Head from 'next/head'
import Layout from '../components/Layout'
import AnimatedText from '../components/AnimatedText'
import Link from 'next/link'
import Image from 'next/image'
import { DribbbleIcon } from '../components/Icons'
import projectImage1 from '../assets/images/projects/crypto-screener-cover-image.jpg'
import { motion } from 'framer-motion'
import TransitionEffect from '../components/TransitionEffect'

const FramerImage = motion(Image)

const FeaturedProject = ({type, title, summary, img, link, dribbble}) => {
  return (
    <article className='flex w-full items-center justify-between rounded-3xl border border-solid border-dark bg-light dark:bg-dark dark:border-light 
    shadow-2xl p-12 relative rounded-br-2xl lg:flex-col lg:p-8 xs:rounded-2xl xs:rounded-br-3xl xs:p-4'>
        <div className='absolute top-0 -right-3 -z-10 w-[101%] h-[103%] rounded-[2.5rem] bg-dark dark:bg-light rounded-br-3xl
        xs:-right-2 sm:h-[102%] xs:w-full xs:rounded-[1.5rem]'/>
                  
        <Link href={link} target='_blank' className='w-1/2 cursor-pointer overflow-hidden rounded-lg lg:w-full' >
            <FramerImage src={img}  sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw' priority
            alt={title} className='w-full h-auto' whileHover={{scale: 1.05}} transition={{duration:0.2}} />
        </Link>
        <div className='w-1/2 flex flex-col items-start justify-between pl-6 lg:w-full lg:pl-0 lg:pt-6'>
            <span className='text-xl text-primary dark:text-primaryDark font-medium xs:text-base'>{type}</span>
            <Link href={link} target='_blank' className='hover:underline underline-offset-2' >
                <h2 className='my-2 w-full text-left text-4xl font-bold sm:text-sm'>{title}</h2>
            </Link>
            <p className='my-2 font-medium text-dark dark:text-light sm:text-sm'>{summary}</p>
            <div className='mt-2 flex items-center' >
                <Link href={dribbble} target='_blank' className='w-10' ><DribbbleIcon /></Link>
                <Link href={link} target='_blank' 
                  className='p-2 px-6 text-lg ml-4 rounded-lg bg-dark text-light dark:bg-light dark:text-dark font-semibold sm:px-4 sm:text-base' >
                  Visit Project
                  </Link>
            </div>
        </div>
    </article>
  )
}
const Project = ({type, title, img, link, dribbble}) => {
  return (
    <article className='flex flex-col w-full items-center justify-between rounded-2xl border border-solid border-dark bg-light dark:bg-dark dark:border-light shadow-2xl p-6 relative xs:p-4'>
        <div className='absolute top-0 -right-3 -z-10 w-[101%] h-[103%] rounded-[2rem] bg-dark dark:bg-light 
        xs:-right-2 md:w-[101%] xs:h-[102%] xs:rounded-[1.5rem]'/>
                  
        <Link href={link} target='_blank' className='w-full cursor-pointer overflow-hidden rounded-lg' >
            <FramerImage src={img} alt={title} className='w-full h-auto' whileHover={{scale: 1.05}} transition={{duration:0.2}} />
        </Link>
        <div className='w-full flex flex-col items-start justify-between mt-4'>
            <span className='text-xl text-primary dark:text-primaryDark font-medium lg:text-lg md:text-base'>{type}</span>
            <Link href={link} target='_blank' className='hover:underline underline-offset-2' >
                <h2 className='my-2 w-full text-left text-4xl font-bold lg:text-2xl'>{title}</h2>
            </Link>
            <div className='w-full mt-2 flex items-center justify-between' >
                <Link href={link} target='_blank' className='text-lg font-semibold underline md:text-base' >Visit</Link>
                <Link href={dribbble} target='_blank' className='w-8 md:w-6' >
                    {" "}<DribbbleIcon />{" "}
                </Link>
            </div>
        </div>
    </article>
  )
}

const projects = () => {
  return (
    <>
    <Head>
        <title>Endurance Ogbeide | Project Page</title>
        <meta name="description" content="View my cool projects" />
       
    </Head>
      <TransitionEffect />
    <main className='flex flex-col items-center justify-center mb-16 w-full dark:text-light'>
        <Layout className='pt-16'>
        <AnimatedText className='mb-16 lg:!text-7xl sm:mb-8 sm:!text-6xl xs:!text-4xl' text={"Amala Trumps Ewedu!"}/>
            <div className='grid grid-cols-12 gap-24 gap-y-32 xl:gap-x-16 lg:gap-x-8 md:gap-y-24 sm:gap-x-0'>
                <div className='col-span-12'>
                <FeaturedProject
                  title= 'Crypto Screener Application'
                   summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                   It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                   local currency.' 
                   dribbble={'/'}
                   link={'/'}
                   type={'Featured Project'}
                   img={projectImage1}
                    />
                </div>
                <div className='col-span-6 sm:col-span-12'>
                <Project
                  title= 'Crypto Screener Application'
                  summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                  It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                  local currency.' 
                  dribbble={'/'}
                  link={'/'}
                  type={'Project'}
                  img={projectImage1}
                  />
                </div>
                <div className='col-span-6 sm:col-span-12'>
                  <Project
                  title= 'Crypto Screener Application'
                   summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                   It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                   local currency.' 
                   dribbble={'/'}
                   link={'/'}
                   type={'Project'}
                   img={projectImage1}
                    />
                </div>
                <div className='col-span-12'>
                <FeaturedProject
                  title= 'Crypto Screener Application'
                   summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                   It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                   local currency.' 
                   dribbble={'/'}
                   link={'/'}
                   type={'Featured Project'}
                   img={projectImage1}
                    />
                </div>
                <div className='col-span-6 sm:col-span-12'>
                <Project
                  title= 'Crypto Screener Application'
                  summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                  It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                  local currency.' 
                  dribbble={'/'}
                  link={'/'}
                  type={'Project'}
                  img={projectImage1}
                  />
                </div>
                <div className='col-span-6 sm:col-span-12'>
                  <Project
                  title= 'Crypto Screener Application'
                   summary='A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. 
                   It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your 
                   local currency.' 
                   dribbble={'/'}
                   link={'/'}
                   type={'Project'}
                   img={projectImage1}
                    />
                </div>
            </div>
        </Layout>
    </main>
    </>
  )
}

export default projects

I made two components based on the project type, featured_projects and projects. I want to use this to classify the component to look like the design but am I lost.

I tried to map the components sided by side and use if statement to separate them but it didn't work.


const projectData = [
  {id: 0 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 1 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 2 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 3 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 4 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 5 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 6 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 7 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 8 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 9 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 10 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 11 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 12 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 13 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribble:'/', link:'/'},
  {id: 14 , title: 'Crypto Screener Application', type:'Featured Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
  {id: 15 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribble:'/', link:'/'},
  {id: 16 , title: 'Crypto Screener Application', type:'Project', img: projectImage1, summary: 'A feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. It shows detail regarding almost all the cryptocurrency. You can easily convert the price in your local currency.', dribbble:'/', link:'/'},
]

{projectData.map((item, index)=>
     <>
        {item. Type="Featured Project" ?
           <FeaturedProject
             key={index}
             title= {item.title}
             summary={item.summary} 
             dribbble={item.dribbble}
             link={item.link}
             type={item.type}
             img={item.projectImage1}
           />
          :
          <Project
             key={index}
               title= {item.title}
               summary={item. Summary} 
               dribbble={item.dribbble}
               link={item.link}
               type={item. Type}
               img={item.projectImage1}
            />
         }
    </>
 )}

I also thought about seperating each components by filtering them. But Even if I do that I dont know how to arrange to look the design... Design link

Thank you for your time

"I tried to map the components sided by side and use if statement to separate them but it didn't work." Can you explain what didn't work here please? What statement were you using in the if statement. I assume you tried something like `if(isFeaturedProduct){return }else{ return }` when mapping through an array of all the Projects? — p7dxb, Aug 26 '23 at 18:44
The answer to this may help https://stackoverflow.com/questions/44969877/if-condition-inside-of-map-react — p7dxb, Aug 26 '23 at 18:46
thanks for responding... It turn all components to featured projects — yusufff, Aug 26 '23 at 19:04

p7dxb · Accepted Answer · 2023-08-26T19:12:27.033

1

Solution

There is a typo in your conditional check

{item.type="Featured Project" ?

should be:

{item.type == "Featured Project" ?

Explanation

Your current conditional is an assignment so always gives the FeaturedProject
As you mentioned in your comment your current code always gives a Featured Project because the item.type="Featured Project" always evaluates to true
For more details on why assignment evaluates to true see the answer to this question

edited Aug 26 '23 at 19:12

answered Aug 26 '23 at 19:07

p7dxb

397
8

1

Woa... Silly me thanks so much. – yusufff Aug 27 '23 at 10:45
You're welcome! Your site looks pretty nice as well – p7dxb Aug 27 '23 at 12:22

score 1 · Answer 2 · answered Aug 26 '23 at 19:10

From your code, I assume that the rendered component will be always "Featured Project" since you are making an assignment to the item type instead of making a condition.

Change the condition to item.type == "Featured Project", the == is used for comparison while = is an used for assigning a new value.

Map through a 2 different components but differentiating them with their types

2 Answers2

Solution

Explanation