CODEWITHSUNDEEP
reactjs
user11657234
user11657234

Reputation:

Dynamically create class Names in react

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.

enter image description here

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

Upvotes: 0

Views: 315

Answers (2)

Kevin Hoopes
Kevin Hoopes

Reputation: 507

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.

Upvotes: 1

Sanat Gupta
Sanat Gupta

Reputation: 1154

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>

Upvotes: 1

Related Questions