React JS Как правильно отобразить Категории и Подкатегории

Question

Столкнулся с проблемой отображения Категорий и Подкатегорий в React JS.

У меня есть такой набор данных получаемый от сервера.

[
    {
        "id": 2,
        "name": "Телефоны",
        "sub_category": [
            {
                "id": 1,
                "name": "Сматрфоны"
            },
            {
                "id": 2,
                "name": "Кнопочные телефоны"
            }
        ]
    },
    {
        "id": 1,
        "name": "Гарнитура",
        "sub_category": [
            {
                "id": 3,
                "name": "Наушники"
            }
        ]
    },
    {
        "id": 3,
        "name": "Комплектующие для ПК",
        "sub_category": [
            {
                "id": 4,
                "name": "Видеокарта"
            }
        ]
    }
]

Я в Navbar вывел название категорий в список <li> через .map, хотел то же самое сделать и с Подкатегориями но IDE подсказывает об "Непредвиденный Токен"

Navbar.jsx

import React from "react";
import {Link} from 'react-router-dom';

const Navbar = ({cat}) => {
    console.log(cat);
    return (
        <div className="navbar" >
            <div className="navbar__links" >
                <Link to="/" style={{ padding: 20 }}>Главная Страница</Link>
            </div>
            <div>
                {cat.map((cat) => (
                    <div className="category">
                        <li>{cat.name}</li>
                        <div className='subcategory'>
                            <li>{cat.sub_category.map((cat.sub_category)=>  (
                                {cat.sub_category.name}
                            ))}
                            </li>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};
export default Navbar;

App.js

import  React, {useState ,useEffect} from 'react';
import VdsServices from './components/API/VdsService';
import Main from './pages/main';
import Navbar from './components/UI/Navbar';

function App() {
  const [category,setCategory] = useState([])
  
  useEffect(() => {
    getCategorys();
  }, [])

  async function getCategorys() {
    const cat = await VdsServices.get_category();
    setCategory(cat);
  };

  return (
    <BrowserRouter>
      <Navbar cat = {category} />
      <Routes>  
          <Route path='/' element={<Main/>} />
          <Route path='*' element={<Navigate to='/'/>}/>  
      </Routes> 
      </BrowserRouter>
  );
}

export default App;

Answer 1

Привожу пример без элементов react-router-dom, думаю будет понятно как можно выводить вложенные массивы...

const cat = [{
    "id": 2,
    "name": "Телефоны",
    "sub_category": [{
        "id": 1,
        "name": "Сматрфоны"
      },
      {
        "id": 2,
        "name": "Кнопочные телефоны"
      }
    ]
  },
  {
    "id": 1,
    "name": "Гарнитура",
    "sub_category": [{
      "id": 3,
      "name": "Наушники"
    }]
  },
  {
    "id": 3,
    "name": "Комплектующие для ПК",
    "sub_category": [{
      "id": 4,
      "name": "Видеокарта"
    }]
  }
]

const Navbar = ({cat}) => {
    return (
        <div className="navbar" >
            <div className="navbar__links" >
                <a href='#'>Главная Страница</a>
            </div>
            <ul>
                {cat.map(cat => <Cat key={cat.id} obj={cat} />)}
            </ul>
        </div>
    );
};

function Cat({obj}) {
  return <li className="category">{obj.name}
    <ul>
      {obj.sub_category.map(o => <li key={o.id} >{o.name}</li>)}
    </ul>
  </li>

}

const root = ReactDOM.createRoot(document.querySelector('#like_button_container'));
root.render(<Navbar cat={cat} />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

React JS Как правильно отобразить Категории и Подкатегории

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