Задать вопрос
@IT_OSNOVA
react

Как добавлять react-атрибуты по условию?

Доброго времени суток.

Есть компонент, который отвечает за вывод пагинации.
В return компонента пагинация выводится следующим образом:
return (
            <div className = "Question-list">
                {this.props.data.map((value, index) => <li onClick = {this.setChosenQuestionNumber}
                                                           key = {this.props.data[index]['id']}
                                                           className="Question-list-item">
                                                                <span className="question-list-number">{index + 1}
                                                                </span>
                                                           </li>)}
            </div>
        )


В зависимости от приходящего в компонент props (массив) нужно присваивать кнопке пагинации (<li>) тот или иной класс.

Подскажите, пожалуйста, как это сделать.
  • Вопрос задан
  • 4959 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вариант 1: 
<li className={someCondition ? someClass : someOtherClass} />

где someCondition условие, например:
someProp === SOME_CONSTRANT

Вариант2:
<li className={getClassName(someProp)} />

Вы передаете в вызове map элемент первым аргументом, но при этом обращаетесь к нему через массив:
key = {this.props.data[index]['id']}
очень нелогичный ход, исправьте на:
key = {value.id}
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
@lnked 
return (
    <div className="Question-list">
        {this.props.data.map((value, index) => {
            const cn = []

            if (value === 1) {
                cn.push('Question-list-item--current')
            }
            else {
                cn.push('Question-list-item')
            }

            return <li onClick={this.setChosenQuestionNumber} key={value.id} className={cn.join(' ')}>
                <span className="question-list-number">{index + 1}</span>
            </li>
        })}
    </div>
)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend developer (React)
Баланс-Платформа • Москва
До 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аспро Максимум не отображаются картинки из Фотогалереи
18 апр. 2024, в 10:53
500 руб./за проект
Gulp, handlebarsjs - изменение темы сайта на ghost cms
18 апр. 2024, в 10:31
8000 руб./за проект
Symfony, Vue - Сервис автоматизации бизнеса натяжных потолков
18 апр. 2024, в 10:29
700 руб./в час
Ещё заказы