How can i display different component in map()

Question

I have a Card component and a QuestionCard component.

what I want to do is when a user uploads a post or asks a question, it shows the respective component. And this is my idea of doing it :

const CardList = ({cardList}) => {
  return (
    <div className="cardWrapper">
      <div className="cardColumn">
        {cardList.map((card)=>{
            if(){ 
                <Card />
            } else{
                <QuestionCard />
            }
        })}
      </div>

but I don't know what to fill in the expression. Am I have the right idea? Or there are some other ways to do it?

Here is some reference how what it should look like:

reference

Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — pilchard, Jun 19 '22 at 14:53
@Dilshan thanks for reminding me but what I'm asking is what condition should I put inside the parenthesis to accomplish what I want. Sorry if I describe the wrong situation — kevin, Jun 19 '22 at 16:00
Since you haven't given any information about what the data for each card contains we can't tell what the condition would be. What in the card data distinguishes a `Card` from a `QuestionCard`? — juliomalves, Jun 26 '22 at 11:06

score 0 · Answer 1 · answered Jun 19 '22 at 15:07

0

Make sure you return the component to be rendered inside map.

if (){ 
    return <Card / > ;
}

else {
    return <QuestionCard / > ;
}

answered Jun 19 '22 at 15:07

Isaac Jandalala

308
3
9

what condition should I put inside the parenthesis if I want to return the respective component? For instance, if the user uploads a post then return the `card` component, and if the user asks a question then return the `question` component. All I can think of is using the `useState` hook. – kevin Jun 19 '22 at 15:57
1

It depends on what property you are using to classify the "uploads" as you call them. For instance, if you have a type property then it'd be something like ```if (card.type === "question") { return } else { return }``` – Isaac Jandalala Jun 19 '22 at 21:19
Sorry, I have a super newbie question, how or where do I define the `card.type`? Inside my `Card` component or inside the `cardList` component? – kevin Jun 20 '22 at 04:41
It would make sense to define it on ```Card```. This is because you have to have a way of differentiating the different types of input (question or post). Logically, it would make sense to use ```CardList``` for rendering multiple ```Card```s. – Isaac Jandalala Jun 20 '22 at 08:33
Sorry to bother u, but how do I define the type of component? `function Card (): card {}`? but this is for typescript – kevin Jun 20 '22 at 13:21
If you can, please share a Pastebin link to your component. It'll be much easier to explain using your own code, otherwise I feel like I might be confusing you. – Isaac Jandalala Jun 21 '22 at 08:51

Y H R · Answer 2 · 2022-06-23T14:13:36.630

If I understand correctly:

If a question is asked by the user — we wish to render <QuestionCard />;
If a post is uploaded by the user — we wish to render <Card />.

First off, you need a way to determine if the looped-over object is a question or a post:

One way of doing so is adding 1 or 2 boolean properties to your cardList array of objects:

isQuestion — if set to true then the card is a question;
isPost — if set to true then the card is an uploaded post.

In fact, one of the two is plenty enough for this use case.

card.isQuestion ? (Render <QuestionCard/>) : (Render <Card />)

I am using a ternary operator because it is easier to read than an if statement.

Provided that's what you want to do, your test would look like this:

{cardList.map((card, id) =>
            card.isPost ? ( // Render <Card /> if the card is a post
             <Card key={id} />
            ) : ( // If the card isn't an uploaded post then it is necessarily a question
              <QuestionCard key={id} />
            )
          )}

P.S. You should probably use NextJS' dynamic styling system depending on how much your project is going to scale, to avoid any mix-ups between the same classname in different files in the future.

How can i display different component in map()

2 Answers2