HomeWork/project/my-project/src/components/category.js

import { Link } from 'react-router-dom';
import { PieChartOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { Menu } from 'antd';
import React from 'react';

const CategoryListItem = ({ _id, name, auth }) => {
  return (
    < >
      <Menu.Item icon={<PieChartOutlined />}><Link to={`/category/${_id}`}>{name} </Link></Menu.Item>
    </>

  );
};

const CategoryList = ({ cats, auth }) => {
  console.log('cats', cats);

  return (
    <div >

      {cats.map((item) => <CategoryListItem key={item._id} {...item} auth={auth} />)}

    </div>
  );
};

const mapStateToProps = state => ({
  cats: state.promise.rootCats?.payload || [],
  auth: state.auth
});

const CCategoryList = connect(mapStateToProps)(CategoryList);

export default CCategoryList;