Как вывести объекты в массиве что бы задавать им разные стили?

Question

Вывожу значения из массива в таблицу и хочу сделать что бы определённые значения выводились с другим стилем. Думаю что можно сделать проверку по id или добавить ещё один булевой атрибут по которому будут определятся эти объекты и добавляться к ним класс, но не могу понять как это написать

export default class Table extends Component {
  regions = [{
      id: 1,
      coal: 94100,
      wood: 500,
      oil: 1500,
    },
    {
      id: 2,
      coal: 4300,
      wood: 500,
      oil: "-",
    },
   ];

  render() {
    return (
      <div className="table-box">
        <table className="curr-status-table">
          <thead>
            <tr>
              <th>coal</th>
              <th>wood</th>
              <th>oil</th>
            </tr>
          </thead>
          <tbody>
            {this.regions.map((local) => (
              <tr key={local.id}>
                <td>{local.coal}</td>
                <td>{local.wood}</td>
                <td>{local.oil}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

Answer 1

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

{this.regions.map((local, index) => (
    <tr key={local.id} className={index === 0 || index === 4 ? "total-str" : "all-str"}>

БЛОГ НА HUSL

Как вывести объекты в массиве что бы задавать им разные стили?

Ответы (1 шт):