CODEWITHSUNDEEP
javascripthtmlreactjsjsx
ganesh kaspate
ganesh kaspate

Reputation: 2685

How to add a condition on a div in react jsx element

I have an jsx structure which looks like

Here I have added the item.hideon for div element. But I am trying to do is

 <div className={css.maincon}>
        {switchItems.map(item => (
          { !item.hideOn &&  <div key={item.id} className={css.toggle}>
              <span className={css.toggleLabel}>{item.uncheckedValue}</span>
              <span>
                <Switch
                  key={`${item.id}-switch`}
                  name={item.id}
                  checked={item.isChecked}
                  onChange={e => handleChange(e, item.id)}
                  defaultChecked
                  color='default'
                />
              </span>
              <span className={css.toggleLabel}>{item.checkedValue}</span>              
          </div> }
        ))}
      </div>

Here trying to add hideOn on the entire div itself. When I am trying to this , I am getting an compile time error ':' expected not sure why this is hAPPENING. can any one help me out here.

Thanks.

Upvotes: 0

Views: 446

Answers (1)

dogukyilmaz
dogukyilmaz

Reputation: 615

First can you try to remove curly brackets {} inside map function. It return already, you can check a statement as !item.hideOn.

Just try to remove curly brackets in pointed lines.

{switchItems.map(item => (
  !item.hideOn && (<div key={item.id} className={css.toggle}> // this line <=
    // inside of your div          
  </div>) // and this line<=
))}

If this not works. Try ternary.

!item.hideOn ? your div : null

Upvotes: 1

Related Questions