Как менять класс исходя из содержания массива данных в React?

Question

[mishapsv]

Есть некоторый джейсон-массив и исходя из его содержимого кнопки должны менять цвет.
Это видимо просто, но не получается реализовать.
Здесь написал через оператор ?, но больше одного условия не выполняется. Да и не правильно это, нужно выносить.
Если выносить в переменную, которую затем подставлять className={переменная}, то получается массив нужно еще раз перебирать.
Как бы вы это написали?

Answer 1

[Руслан Абдуллаев]

Если уникальный класс всего один, то проще всего через switch/case или reduce, но если таких классов много, то чем обходить массив, лучше обращаться по ключу:

const statuses = {
'new_message': ["Новое сообщение", "btn-default"],
'pay': ["Оплатить", "btn-primary"]
...
};

className={statuses[box.btn1][1]}

Можно конечно оставить ключами и кириллические статусы, но это менее надежно, как мне кажется.

Можно еще хранить текст кнопки и класс не в массиве, а во вложенном объекте, для лучшей читаемости

P.S. Добавил пример

Comments

[mishapsv]

Руслан Абдуллаев Будет 3-4 класса(к примеру бутстраповские: btn btn-primary, btn btn-success, btn btn-info, btn btn-warning). Буду очень благодарен, если покажите на моем примере.

[Руслан Абдуллаев]

А с сервера json приходит именно в виде btn1: "Новое сообщение"? Нельзя вместо статуса отправлять его id?

[mishapsv]

Руслан Абдуллаев Пока использую условные данные. "Новое сообщение", "В работе", "К оплате" - это информация, которая должна отражаться на кнопках.
Передавать id и по нему уже назначать класс и текст кнопки - возможно даже лучше.

Answer 2

[Александр Петров]

Есть замечательный пакет classnames, который позволяет удобно создавать строку классов из объекта по условию.
И получаем:

{ boxes.map(box => (
  <button type="button" className={classNames({
    'btn': true,
    'btn-default': box.btn1 === 'Новое сообщение',
    'brn-primary': box.btn1 !== 'Новое сообщение'
  })}>
    ывыв
  </button>
                                            
)) }

Comments

[Руслан Абдуллаев]

Да, это замечательный пакет, который пришел на смену classSet, как вариант декларативного описания сборки классов он тоже подойдет, но надо не забывать, что это лишняя зависимость.

[Александр Петров]

Руслан Абдуллаев не вижу проблемы в «лишней зависимости». Особенно учитывая, что пакет весит ничтожно мало.

Answer 3

[Pavel Shvedov]

Рассчитайте имя класса в переменную в методе render до вызова return, с помощью какого-нибудь switch/case, а потом его просто вставьте в шаблон где надо