Что не так с кодом?

Question

[d1zz74]

Что не так? Выдаёт ошибку.
Задание:

dl тег, используется при создании списков определений, в которых dt тег содержит название, а dd описание определения.

src/Definitions.jsx
Реализуйте компонент Definitions, который принимает свойство data следующей структуры:
const definitions = [
  { dt: 'one', dd: 'two' },
  { dt: 'another term', dd: 'another description' },
];

<Definitions data={definitions} />

import { uniqueId } from 'lodash';
import React from 'react';

export default class Definitions extends React.Component {
 render () {
    const {data} = this.props
    return (
      <dl>
        {data.map(definitions=> 
          <React.Fragment key={definitions.key}>
            <dt> {definitions.dt} </dt>
            <dd> {definitions.dd} </dd>) 
          </React.Fragment> )}
      </dl>
    );
  }
}

Index.js:

import ReactDOM from 'react-dom';
import React from 'react';

import Definitions from './Definitions.jsx';

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

ReactDOM.render(
  <Definitions data={definitions} />,
  document.getElementById('container'),
);

Comments

[Михаил]

Vanga mode on

[Сергей Горностаев]

Ошибку мы должны угадать?

[d1zz74]

Сергей Горностаев, Запускаю тут такая ошибка

make: Entering directory '/usr/src/app'

npm test -s

 FAIL  __tests__/test.jsx

  ✕ Definitions 1 (41 ms)
  ✕ Definitions 2 (2 ms)

  ✕ Definitions 3 (2 ms)
  ✕ Definitions 4 (1 ms)


  ● Definitions 1

    expect(received).toMatchSnapshot()

    Snapshot name: `Definitions 1 1`

    - Snapshot  -  0
    + Received  + 10

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

      12 |   const component = renderer.create(<Definitions data={definitions} />);
      13 |   const tree = component.toJSON();
    > 14 |   expect(tree).toMatchSnapshot();
         |                ^
      15 | });
      16 | 
      17 | test('Definitions 2', () => {

      at Object.<anonymous> (__tests__/test.jsx:14:16)

  ● Definitions 2

    expect(received).toMatchSnapshot()

    Snapshot name: `Definitions 2 1`

    - Snapshot  - 0
    + Received  + 5

      <dl>
        <dt>
    +      
          one
    +      
        </dt>
        <dd>
    +      
          two
    +      
        </dd>
    +   )
      </dl>

      21 |   const component = renderer.create(<Definitions data={definitions} />);
      22 |   const tree = component.toJSON();
    > 23 |   expect(tree).toMatchSnapshot();
         |                ^
      24 | });
      25 | 
      26 | test('Definitions 3', () => {

      at Object.<anonymous> (__tests__/test.jsx:23:16)

  ● Definitions 3

    expect(received).toMatchSnapshot()

    Snapshot name: `Definitions 3 1`

    - Snapshot  -  0
    + Received  + 10

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

      31 |   const component = renderer.create(<Definitions data={definitions} />);
      32 |   const tree = component.toJSON();
    > 33 |   expect(tree).toMatchSnapshot();
         |                ^
      34 | });
      35 | 
      36 | test('Definitions 4', () => {

      at Object.<anonymous> (__tests__/test.jsx:33:16)

  ● Definitions 4

    expect(received).toMatchSnapshot()

    Snapshot name: `Definitions 4 1`

    - Snapshot  - 1
    + Received  + 1

    - null
    + <dl />

      38 |   const component = renderer.create(<Definitions data={definitions} />);
      39 |   const tree = component.toJSON();
    > 40 |   expect(tree).toMatchSnapshot();
         |                ^
      41 | });
      42 | 

      at Object.<anonymous> (__tests__/test.jsx:40:16)


 › 4 snapshots failed.

  console.error
    Warning: Each child in a list should have a unique "key" prop.
    
    Check the render method of `Definitions`. See https://fb.me/react-warning-keys for more information.
        in Fragment (created by Definitions)
        in Definitions

       9 |     const { data }  = this.props 
      10 |     return (
    > 11 |       <dl>
         |       ^
      12 |         {data.map(definitions=> 
      13 |           <React.Fragment key={definitions.key}>
      14 |             <dt> {definitions.dt} </dt>

      at printWarning (../../lib/node_modules/react/cjs/react.development.js:315:30)
      at error (../../lib/node_modules/react/cjs/react.development.js:287:5)
      at validateExplicitKey (../../lib/node_modules/react/cjs/react.development.js:1630:5)
      at validateChildKeys (../../lib/node_modules/react/cjs/react.development.js:1656:9)
      at Object.createElementWithValidation [as createElement] (../../lib/node_modules/react/cjs/react.development.js:1806:7)
      at Definitions.render (src/Definitions.jsx:11:7)
      at finishClassComponent (../../lib/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)


Snapshot Summary
 › 4 snapshots failed from 1 test suite. Inspect your code changes or run `npm test -- -u` to update them.



Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total
Snapshots:   4 failed, 4 total
Time:        2.404 s
Ran all test suites.

make: *** [Makefile:2: test] Error 1

make: Leaving directory '/usr/src/app'

[d1zz74]

Михаил, понимаю

[Михаил]

d1zz74, ну явно лишняя )

[d1zz74]

Михаил, Не, та же ошибка