Conditionally render a DOM element in React

Question

I tried using if/else and same problem JSX

return ( 
     <Layout>
           <>
            {data.map((service, index) => (
              { index % 2 === 0 ?
                 <div className="circle"></div>
                 :
                 <div className="square"></div>  
               } 
              ))
             }
        </>
      </Layout> 
  )

ERROR

I think that you need to remove the parenthesis after the fat arrow — tpliakas
– tpliakas, Commented Feb 3, 2020 at 23:00

Joe · Accepted Answer · 2020-02-03 22:58:15Z

1

Please use below code.

return ( 
     <Layout>
           <>
            {data.map((service, index) => {
              return index % 2 === 0 ?
                 <div className="circle"></div>
                 :
                 <div className="square"></div>  

              })
             }
        </>
      </Layout> 
  )

answered Feb 3, 2020 at 22:58

Joe

1325 bronze badges

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

Comments

crrmacarse · Accepted Answer · 2020-02-03 23:09:04Z

1

For a much cleaner alternative:

  return ( 
     <Layout>
       {data.map((service, index) => (
         <div className={index % 2 === 0 ? 'circle' : 'square'}></div>
       ))}
      </Layout> 
  )

answered Feb 3, 2020 at 23:09

crrmacarse

1,2461 gold badge10 silver badges24 bronze badges

3 Comments

Patricio Vargas Over a year ago

I guess i didn't put the full code, but the problem is that the content structure on the inside needs to alternate but based on my example this is correct

crrmacarse Over a year ago

To add, this is perfect if you only wanted to toggle css classes

Patricio Vargas Over a year ago

I actually ended up doing somethign toggleing classes and handeling stuff on the scss side but i wanted to do it how to do it without

selbie · Accepted Answer · 2020-02-03 23:09:12Z

1

What about this:

const elementSet = data.map(( service, index) => ((index % 2)===0) ? (<div className="circle"></div>) : (<div className="square"></div>) );
return ( 
       <Layout><>
        {elementSet}
       </></Layout>
);

answered Feb 3, 2020 at 23:09

selbie

105k15 gold badges109 silver badges187 bronze badges

Collectives™ on Stack Overflow

Conditionally render a DOM element in React

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related