CODEWITHSUNDEEP
htmlcssreactjs
luckydev
luckydev

Reputation: 149

React: How to add unique className?

How to add to className - "i"? To make each class unique? Or maybe it is done somehow differently? Tell me please?

	const onHandleCreateBlockInfo = () => {
  return infoArray.map(i => {
    return (
      <div key={id++} className={i.keys()}>
	 {i.company !== undefined ? <h2>Всего клиентов: {i.company.length}</h2> : null}
	 {i.invoice !== undefined ? <h2>Оплаченных заказов: {i.invoice.length}</h2> : null}
	 {i.projects !== undefined ? <h2>Открытых проектов: {i.projects.filter(i => i.status === true).length}</h2> : null}
	 {i.users !== undefined ? <h2>Работников компании: {i.users.length}</h2> : null}
      </div>
    );
  })
};

This is not how it works (

Upvotes: 0

Views: 125

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

try className={"myClassName"+index} which is static part myClassName and adding the index to it; be sure to get the index inside map also. Snippet below:

  return infoArray.map((i, index) => {
return (
  <div key={index} className={"myClassName"+index}>
 {i.company !== undefined ? <h2>Всего клиентов: {i.company.length}</h2> : null}
 {i.invoice !== undefined ? <h2>Оплаченных заказов: {i.invoice.length}</h2> : null}
 {i.projects !== undefined ? <h2>Открытых проектов: {i.projects.filter(i => i.status === true).length}</h2> : null}
 {i.users !== undefined ? <h2>Работников компании: {i.users.length}</h2> : null}
  </div>
);
  })

Upvotes: 2

Related Questions