Условно отрендерить элемент DOM в React

Question

Я пытался использовать if / else и та же проблема JSX

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

ОШИБКА

Answer 1

Для более чистой альтернативы:

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

Answer 2

Что по этому поводу:

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

Answer 3

Пожалуйста, используйте ниже код.

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

              })
             }
        </>
      </Layout> 
  )