Dynamically create class Names in react

Question

I am currently mapping over some data and I would like to create a unique className for each result being returned specifically for the test.typical_dq_domain.

For example below shows what data is being returned... With the value displaying Uniqueness would like to have a className called Uniqueness etc.

 {unitTestTemplates.map(test =>
          <div className='Table CreateUnitTestsGrid' style={{cursor: 'pointer'}}>
            <div>{test.test_type}</div>
            <div>{test.typical_dq_domain}</div>
          </div>
        )}
        </div>

Kevin Hoopes · Accepted Answer · 2020-08-19 05:05:15Z

1

You can use template strings to create dynamic classes based on values in any variables you're using! In this case, if the typical_dq_domain property contains the string that you want to be your class name, you can do something like this.

{unitTestTemplates.map((test, index) =>
   <div className={`Table CreateUnitTestsGrid ${test.typical_dq_domain}`}>
      <div>{test.test_type}</div>
      <div>{test.typical_dq_domain}</div>
   </div>
)}

Then, if test.typical_dq_domain had a value of "VALIDITY", for example, that div would have classes "Table", "CreateUnitTestsGrid", and "VALIDITY" applied to it.

edited Aug 19, 2020 at 5:05

answered Aug 19, 2020 at 4:56

Kevin Hoopes

5173 silver badges8 bronze badges

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

5 Comments

user11657234 Over a year ago

thanks, just getting an unexpected token with the } on the end. Any idea!?

Kevin Hoopes Over a year ago

Sorry, which } are you referring to? The one at the end of the whole code snippet, or the one at the end of the className definition?

Kevin Hoopes Over a year ago

Ah that's my bad, I had an extra paren in there at the top :) I fixed it, it should be fine now.

user11657234 Over a year ago

Thank you, amazing! Exactly what I was looking for.

Kevin Hoopes Over a year ago

Awesome, glad I could help!

Sanat Gupta · Accepted Answer · 2020-08-19 04:49:23Z

1

Please have a look I hope it's helpful. Thanks

{unitTestTemplates.map((test,index) =>
          <div className={`Uniqueness_${index}`} style={{cursor: 'pointer'}}>
            <div>{test.test_type}</div>
            <div>{test.typical_dq_domain}</div>
          </div>
        )}
        </div>

answered Aug 19, 2020 at 4:49

Sanat Gupta

1,1641 gold badge10 silver badges18 bronze badges

4 Comments

user11657234 Over a year ago

Ah thanks, what if I wanted the rest of the typical_dq_domain values to have a unique class. Like for instances consistency would then have a class Name of consistency

Sanat Gupta Over a year ago

Welcome, Please have a look https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector I hope You will get your answer.

Sanat Gupta Over a year ago

You need to use querySelector to select a particular row on behalf of a class

Sanat Gupta Over a year ago

@tjhunt Please mark as an accepted answer for other's developers easily identify the right one.

Collectives™ on Stack Overflow

Dynamically create class Names in react

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related