How to use react conditional rendering?

Question

I want to be able to display a grid row gap if test.space_above = true on the data I am mapping over.

 {sortedUnitTestTemplates.map(test =>
      <div key={test.id} className='Table CreateUnitTestsGrid' style={{cursor: 'pointer'}} onClick={() => onTestTypeClick(test.id)}>


        <div>{test.test_type}</div>
        <div style={{width: '150px'}}>
          {!test.typical_dq_domain ? null :
            <Chip 
              label={test.typical_dq_domain}
              className='Badge' 
              style={{
                width: '100%', 
                color: getColor('fg', test.typical_dq_domain), 
                backgroundColor: getColor('bg', test.typical_dq_domain)
              }}
            />
          }
        </div>
      </div>
    )}
  </div>

Does this answer your question? React Conditional Rendering

Kuf
– Kuf

2020-08-21 02:28:07 +00:00
Commented Aug 21, 2020 at 2:28 — Kuf
– Kuf, Commented Aug 21, 2020 at 2:28

cyberwombat · Accepted Answer · 2020-08-21 02:31:04Z

0

its a little unclear how and where you want this gap... But here I am adding margin:

{sortedUnitTestTemplates.map(test =>
      <div key={test.id} className='Table CreateUnitTestsGrid' style={{cursor: 'pointer'}} onClick={() => onTestTypeClick(test.id)}>


        <div>{test.test_type}</div>
        <div style={{width: '150px', marginTop: test.space_above ? '100px' : 0 }}>
          {!test.typical_dq_domain ? null :
            <Chip 
              label={test.typical_dq_domain}
              className='Badge' 
              style={{
                width: '100%', 
                color: getColor('fg', test.typical_dq_domain), 
                backgroundColor: getColor('bg', test.typical_dq_domain)
              }}
            />
          }
        </div>
      </div>
    )}
  </div>

answered Aug 21, 2020 at 2:31

cyberwombat

40.5k43 gold badges188 silver badges268 bronze badges

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

Comments

Liu Lei · Accepted Answer · 2020-08-21 02:55:42Z

0

// { condition && function()}

{test.typical_dq_domain && 
    <Chip 
        label={test.typical_dq_domain}
        className='Badge' 
        style={{
           width: '100%', 
           color: getColor('fg', test.typical_dq_domain), 
           backgroundColor: getColor('bg', test.typical_dq_domain)
        }}
    />
}

u can also check this article 8 conditional rendering methods in React

edited Aug 21, 2020 at 2:55

answered Aug 21, 2020 at 2:45

Liu Lei

1,2971 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to use react conditional rendering?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related