Как сделать динамический класс?

Question

[Nikolaj Alyabiev]

Есть следующий код, я хочу сделать что бы в блоке див менялся класс в зависимости от дня недели, выходные находятся под индексом 6 и 0, то что сейчас написано не работает, как это можно поправить?

export const Grid = ({startDay}) => {

    const day = startDay.clone().subtract(1, 'day');
    const days = [...Array(42)].map(() => day.add(1, 'day').clone());

  return (
    <div className='mainGrid'>
        {
            days.map((item) => (
                <div 
                key={item.format('YYYYMMDD')}
                className={props => props.isWeekend ? 'cell' : 'cellWeekend'} 
                isWeekend={item.day() === 6 || item.day() === 0}>
                    <div className='divFlex'>
                        <div className='dayCell'>
                           {item.format('D')}
                        </div>
                    </div>
                </div>
            ))
        }
    </div>
  )
}

Answer 1

[i1yas]

className не принимает на вход функцию, только строки
Соотвественно передача пропса isWeekend в div бесполезна

Comments

[Nikolaj Alyabiev]

Это то понятно, потому что если бы она принимала то все бы работало, вопрос как сделать что бы заработало

[i1yas]

Nikolaj Alyabiev, так

className={item.day() === 6 || item.day() === 0 ? 'cell' : 'cellWeekend'}

Я бы ещё посоветовал эту проверку вынести в переменную внутри map, или вообще сделать функцию, если эта проверка часто используется

[Nikolaj Alyabiev]

i1yas, Эта проверка только один раз идёт так что делать отдельную функцию под нее нету смысла, спасибо заработало