CODEWITHSUNDEEP
reactjsjsx
Patricio Vargas
Patricio Vargas

Reputation: 5522

Conditionally render a DOM element in React

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

enter image description here

Upvotes: 0

Views: 97

Answers (3)

selbie
selbie

Reputation: 104494

What about this:

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

Upvotes: 1

crrmacarse
crrmacarse

Reputation: 1246

For a much cleaner alternative:

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

Upvotes: 1

Joe
Joe

Reputation: 132

Please use below code.

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

              })
             }
        </>
      </Layout> 
  )

Upvotes: 1

Related Questions