Как исправить ошибку отрисовки списка в React?

Question

[Александр Корегин]

У меня есть список в отдельном файле JS и называется TransactionsList.js

const transactions = [{
    id: 1, 
    value: 100,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 2, 
    value: 100,
    type: 'Доход',
    date: '22.04.2019',
  },
  {
    id: 3, 
    value: 1500,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 4, 
    value: 1500,
    type: 'Доход',
    date: '22.04.2019',
  },
  {
    id: 5, 
    value: 500,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 6, 
    value: 500,
    type: 'Расход',
    date: '22.05.2019',
  },
  {
    id: 7, 
    value: 800,
    type: 'Расход',
    date: '23.05.2019',
  },
  {
    id: 8, 
    value: 800,
    type: 'Расход',
    date: '22.05.2019',
  },
  {
    id: 9, 
    value: 1400,
    type: 'Расход',
    date: '23.05.2019',
  },
  {
    id: 10, 
    value: 1400,
    type: 'Расход',
    date: '22.05.2019',
  }
];

У меня есть шаблон куда нужно отрисовывать элементы списка. Называется Transactions.js

import React from 'react';
import TransactionsList from './TransactionsList';
import './css/transactions.css';

function Transactions(props) {
  const transactionsList = (
    <div>
        <div class="filter-menu">
            <button class="filter-menu__button">Доходы</button>
            <button class="filter-menu__button">Расходы</button>
            <button class="filter-menu__button">За последний месяц</button>
            <button class="filter-menu__button">Более 1000₽</button>
        </div>
        <div class="transactions-menu">
            <ul class="transactions-menu__catalog"> 
            {props.transactions.map((transaction) =>
                <li key={transaction.id}>
                  {transaction}
                </li>
              )}
            </ul>
        </div>
    </div>
  );
  return (
    <main>
      {transactionsList}
    </main>
  );
}

export default Transactions;

А так же есть главный файл Index.JS

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Transactions from './Transactions';
import * as serviceWorker from './serviceWorker';

const transactions = <Transactions />;

ReactDOM.render(
    transactions,
    document.getElementById('root')
);

serviceWorker.unregister();

Но при запуске всей этих файлов выбивает ошибку: TypeError: Cannot read property 'map' of undefined. И ошибку указывается на ul с классом transactions-menu__catalog

Answer 1

[0xD34F]

<Transactions />

Не передаёте параметр transactions.

class="filter-menu"

Меняйте class на className. Не только тут, везде.

{transaction}

Объекты вот так передавать нельзя. Можете сделать JSON.stringify, или создать нормальную разметку, типа

<div>{transaction.type}</div>
<div>{transaction.date}</div>

Comments

[Александр Корегин]

Спасибо большое, это помогло мне решить многие ошибки, но у меня осталась последняя

[0xD34F]

Александр Корегин, почему в вопросе у вас props.transactions, а здесь props.lists? Вы уж определитесь, как параметр называется.

[Александр Корегин]

0xD34F, я изменил, чтобы понятнее было

[0xD34F]

Александр Корегин,

[Александр Корегин]

0xD34F, это просто гениальнейшая шутка)

[0xD34F]

Александр Корегин, это не шутка, про вас нарисовано.

[Александр Корегин]

0xD34F, я конечно понимаю, что выделываться перед новичками знаниями класс, но когда человек меняет название параметра и вы называете это палка в колесо, ну это просто гениально...

[0xD34F]

Александр Корегин, называю как есть. Сами себе на ровном месте проблему создали.

"Выделываться перед новичками" - вот этого я ждал, да, давайте, поскулите о том, какой вы новичок. То, что вы новичок, тут не при чём, это обыкновенная глупость. Думайте, что делаете - голова вам не просто так дана.

[Александр Корегин]

0xD34F, хорошо допустим, вы правы я поменял название это глупость, но проблему это всё равно не решает, почему именно массив прилетал, а transactions показывает undefind

[0xD34F]

Александр Корегин, вы издеваетесь? Вон, на вашем скриншоте содержимое props отображено, и transactions там есть, массив из 10 элементов - какой же это undefined?

[Александр Корегин]

0xD34F, я возможно что-то не до понимаю, но почему тогда у transactions показывает undefined и не продолжает работу ?

[Александр Корегин]

0xD34F, я разобрался, извините, теперь всё понял

Answer 2

[Егор Живагин]

Вы импортируете в шаблон TransactionsList, но никак эту переменную не используете, а map-ите props.transactions (которого нет)