How to use if else condition in Reactjs

Question

I am working on Reactjs and using nextjs,Right now i am getting "cat_name"(category) inside map function(loop), i just want to add condition "if cat_name!="" || cat_name=="pinned" before fetching data How can i do this,Here is my current code

{students.data?.length > 0 &&
 students.data.map((blog) => (
// 
      {blog.cat_name}   // containing category,want to add condition here
       if(blog.cat_name)
           {
                //further code
           }
        else
          {
              // further code
           }
 ))}

marcobiedermann · Accepted Answer · 2023-01-18 13:00:45Z

2

You can use an inline conditional (ternary operator) to render one or the other. Note that you can only return one JSX element, that's why you would have to wrap them in a fragment or div

<>
  {students.data?.length > 0 &&
    students.data.map((blog) => (
      <>
        {blog.cat_name}
        {blog.cat_name ? <>Either</> : <>Or</>}
      </>
    ))}
</>;

References: https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

answered Jan 18, 2023 at 13:00

marcobiedermann

4,9635 gold badges28 silver badges40 bronze badges

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

Comments

Pelicer · Accepted Answer · 2023-01-18 13:04:02Z

Your code is just about right. If you want to go with your syntax, arrow function with no return statement, you could use a ternary approach:

{students.data?.length > 0 &&
 students.data.map((blog) => (
    <> //fragment needed to wrap more than one node
      {blog.cat_name ? <>Something</> : <>Something else</>}
    </>
 ))}

Or you could go with the return statement, in which you would be able to do a "default" if-else statement.

{students.data?.length > 0 &&
 students.data.map((blog) => {
       if(blog.cat_name)
           {
                return <>{blog.cat_name} <>anything else you want here</> </>
           }
        else
          {
              return <>{blog.cat_name} <>anything else you want here</> </>
           }
 })}

jrswgtr · Accepted Answer · 2023-01-20 15:10:15Z

1

You have to use a ternary condition :

{ condition ? a : b }

https://en.wikipedia.org/wiki/Ternary_conditional_operator

edited Jan 20, 2023 at 15:10

jrswgtr

2,4308 gold badges27 silver badges49 bronze badges

answered Jan 18, 2023 at 13:01

John

385 bronze badges

Collectives™ on Stack Overflow

How to use if else condition in Reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related