How to fix list rendering error in React?

Question

React

I have a list in a separate js file and it's called 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',
  }
];

I have a template where to draw list items. It's called 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;

And there is also the main file 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();

But when running all these files, it throws an error: TypeError: Cannot read property 'map' of undefined. And the error is pointed to ul with class transactions-menu__catalog

Answer 1

<Transactions />

Don't pass the transactions parameter.
Change class to className. Not only here, everywhere.
You can't transfer objects like this. You can do JSON.stringify, or you can create normal markup like

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