Как визуализировать DOM с помощью реквизита в React?

Question

Реализация и export новый React Component TableHeader, который будет представлять строку заголовка для любой таблицы.Этот класс должен ожидать prop с именем cols, который является массивом имен столбцов (в виде строк).Класс должен отображать элемент <thead> (заголовок таблицы), содержащий <tr> (строка таблицы).Внутри <tr> должен быть набор <th> (заголовок таблицы) элементов, по одному на каждую строку в cols prop.

Используйте функцию .map() для преобразования cols prop вмассив <th> элементов DOM (используя встроенные выражения JSX и ), а затем включите этот массив в возвращенные элементы DOM.

Обязательно укажите для каждого <th> элемента a *Атрибут 1028 * (строка имени столбца является точным значением), чтобы React мог отслеживать его.

Включить экземпляр класса TableHeader в DOM, представленный классом SenatorTable (как дочерний элемент)<table>).Класс SenatorTable должен пройти TableHeader, он создает cols prop, который является массивом ['Name', 'State', 'Phone', 'Twitter'].

Это должно привести к появлению строки заголовка в таблице (с правильными 4 столбцами).

Это то, что я уже пробовал, однако;Я не понимаю, как я работаю с реквизитом и правильно его визуализирую.

export class TableHeader extends Component {
  render() {
    let colItems = this.props.cols.map((colName) => {
      return <th message={colName} key={colName}/>;
    });

    return (
      <thead>
        <tr>
          {colItems}
        </tr>
      </thead>
    )
  }
}

Answer 1

Тег th не имеет атрибута сообщения.

Вам нужно обернуть имя столбца в открывающий и закрывающий тег th

 let colItems = this.props.cols.map((colName) => {
      return <th key={colName}>{colName}</th>;
    });