Не рендерится строка - ошибка: Text nodes cannot appear as a child of

Question

Всем привет ! Есть массив arrData со следующей структурой:

class Store {
  arrData = [ {name: 'Vitaly', sp: 'SP 5'} ];
  // @computed
  // @action
}

Необходимо вывести заголовок таблицы со значениями в колонках name и sp думаю стандартная задача, но я начинающий и пытаюсь решить самостоятельно.

const RowHead = ( {data: arr }) => {
  let cRowHead = '';
  console.log('arr = ', arr);  
  arr.forEach(element => {
    console.log('element = ', element);   // name
    console.log('element = ', typeof element); // string
    cRowHead += '<td>' + element + '</td>';
  });
  console.log('cRowHead = ', cRowHead);  // cRowHead =  <td>name</td><td>sp</td>
  return (<tr key='head'>{cRowHead}</tr>);

const Table = observer(class Table extends Component {
  render() {
    const {store} = this.props;
    return (
      <table>
        <thead>          
            <RowHead data={Object.keys(store.arrData.slice(0,1)[0])} />          
        </thead>
        <tbody>
          {store.arrData.map((dev,i) =>
            <Row key={i} data={dev} /> )
          }
        </tbody>
      </table>
    )
  }
})

получаю в итоге вместо колонок в шапке таблицы просто текст:

<td>name</td><td>sp</td>

а в консоли:

*Warning: validateDOMNesting(...): Text nodes cannot appear as a child of _tr_.* 
*Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of _tr_. Make sure you don't have any extra whitespace between tags on each line of your source code.*

Answer 1

const RowHead = ({data: arr}) => {
 let thList = []
    arr.map((element, key) => {
      thList.push(<th key={key}> {element} </th>);
    });
      return thList;
  }

  const arrData = [{
    name: "AAA",
    sp: "FFFF",
  }];

export default function App() {
  return (
    <div className="App">
      <table>
          <thead>
              <tr>          
                 <RowHead data={Object.keys(arrData.slice(0,1)[0])}/>
              </tr>         
          </thead>
      </table>
    </div>
  );
}

БЛОГ НА HUSL

Не рендерится строка - ошибка: Text nodes cannot appear as a child of

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