React conditional rendering in Array

Question

I'm trying to figure out conditional rendering in React. I get five categories from API, i just want to print one p tag on basis of categories condition

My Current try :

this.state.links.map(link => 
    div className="youtubeLinks">                       
        <p> print category 1</p>
        <p> print category 2</p>
        <p> print category 3</p>
        <p> print category 4</p>
        <p> print category 5</p>
    </div>

Want to achieve

if(link.category == 1){
<p> print category 1</p>
} 
if(link.category == 2){
<p> print category 2</p>
} 
if(link.category == 3){
<p> print category 3</p>
} 
if(link.category == 4){
<p> print category 4</p>
} 
if(link.category == 5){
<p> print category 5</p>
}

Why you need this? Just use one p and change content inside, depends on category — demkovych
– demkovych, Commented Feb 26, 2020 at 10:56

Jay · Accepted Answer · 2020-02-26 12:06:44Z

3

You can do like this

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        {link.category == 1 && <p> print category 1</p>}
        {link.category == 2 && <p> print category 2</p>}
        {link.category == 3 && <p> print category 3</p>}
        {link.category == 4 && <p> print category 4</p>}
        {link.category == 5 && <p> print category 5</p>}
        <img src={link.link} /> // Here is error img
    </div>
)

if you want to only print category inside p tag

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        <p> print category {link.category}</p>
    </div>
)

For img with p tag

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        {link.category == 1 && (
          <>
            <p> print category 1</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 2 && (
          <>
            <p> print category 2</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 3 && (
          <>
            <p> print category 3</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 4 && (
          <>
            <p> print category 4</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 5 && (
          <>
            <p> print category 5</p>
            <img src={link.link} />
          </>
        )}
    </div>
)

edited Feb 26, 2020 at 12:06

answered Feb 26, 2020 at 10:57

Jay

3,1392 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WapShivam Over a year ago

hello jay i want to print {link.category == 2 && <img src= {link.link} }. So {link.link} show error under curly braces. So how do i get this?

Jay Over a year ago

@WapShivam dont understand exactly please explain more

WapShivam Over a year ago

In my link object there is a key link which store image src. So how do i render that image

Jay Over a year ago

@WapShivam i still dont understand but i have added img tag please check answer you dont need to check link.category == 2

Zaffron · Accepted Answer · 2020-02-26 10:57:57Z

0

You are going good but need a little modification

<div className="youtube-links">
 {this.state.links.map(link => (<p>Print category {link.category}</p>))}
</div>

answered Feb 26, 2020 at 10:57

Zaffron

1541 silver badge5 bronze badges

Comments

Andreas Engebretsen · Accepted Answer · 2020-02-26 11:01:44Z

0

Lets say that you array consists of just text links ['link1', 'link2', 'link3]' and you want to map them out and present them in that p. the link part of your map represents one of the items in you array. I fixed it below.

//link represents one item. So when you then say return

link it will print each items in the array out individually.

 <div className="youtubeLinks">                       
    {this.state.links.map(link => {
        return <p> print category {link}</p>
    })}
 </div>

answered Feb 26, 2020 at 11:01

Andreas Engebretsen

854 bronze badges

Collectives™ on Stack Overflow

React conditional rendering in Array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related