Обработка коллекций React

Question

Есть компонент

<Definitions data={definitions} />

Который принимает в props объект

const definitions = [
  { dt: 'one', dd: 'two' },
  { dt: 'another term', dd: 'another description' },
];

Должно отрендерится

<dl>
  <dt>one</dt>
  <dd>two</dd>
  <dt>another term</dt>
  <dd>another description</dd>
</dl>

Как получить коллекцию и отрендерить я понял, но как сделать вложенность не могу сообразить.
Выбрасывает ошибку

Warning: validateDOMNesting(...): <dd> cannot appear as a descendant of <dt>.

Вот что получилось написать:

export default class Definitions extends Component {


  render() {
    const { data } = this.props;
    return <dl>
      {data.map((item, index) => <dt key={index}>{item.dt}
      </dt>)}
    </dl>
  }
}

Answer 1

В данном случае нужно воспользоваться React.Fragment, как контейнером в котором выводятся два соседних элемента

function Definitions({data}){
    return (<dl>
      {
        data.map((item, index) => <React.Fragment key={index}>
          <dt>{item.dt}</dt>
          <dd>{item.dd}</dd>
        </React.Fragment>)
      }
    </dl>)
}

function App(){
  const definitions = [ { dt: 'one', dd: 'two' }, { dt: 'another term', dd: 'another description' } ]; 
  return <Definitions data={definitions} />;
}

ReactDOM.render(<App />, document.getElementById('container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id="container"></div>

БЛОГ НА HUSL

Обработка коллекций React

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