abhijithvijayan / react-minimal-side-navigation

Minimal side navigation component for React
https://codesandbox.io/s/react-minimal-side-navigation-example-y299d?file=/src/components/NavSidebar.jsx
MIT License
67 stars 29 forks source link

Try to use with a json file #2

Closed Hykox closed 3 years ago

Hykox commented 4 years ago

Hi,

Thanks for this beautiful navigation, i want to use with a json file existing.

i try this but i have error: Warning: Each child in a list should have a unique "key" prop.

Thanks for help.

Code:

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import {Navigation} from 'react-minimal-side-navigation';
import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';

const Rooms = () => {
    const [rooms, setRooms] = useState([])

    useEffect(()=> {
         axios.get('/api/v1/rooms.json')
         .then( resp => {
             setRooms(resp.data.data)
         } )
         .catch( resp => console.log(resp) )
    }, [rooms.length])

    const grid = rooms.map( item => {
        return { title: item.attributes.name, itemId: 'test/'+item.attributes.name,}
    })

    const MenuItems = [grid]

    return (
        <>
          <Navigation
              activeItemId="/test"
              onSelect={({itemId}) => {
                // maybe push to the route
              }}
              items={[
                {
                  title: 'Rooms avaibles',
                  itemId: '/test',
                  subNav: MenuItems,
                },
              ]}
            />
        </>
      );
}

export default Rooms
abhijithvijayan commented 4 years ago

I will look into this :smiley:

abhijithvijayan commented 4 years ago

@Hykox There is a problem with your code

const grid = rooms.map( item => {
    return { title: item.attributes.name, itemId: 'test/'+item.attributes.name,}
})

const MenuItems = [grid]

The subnav property expects array of objects [{title: 'Chandler', itemId: "/test/" + 'Phoebe'}]

You have supplied [][]{} (array of array of objects)

I am not sure what you are trying to establish as the json is not attached herewith.

but please do checkout the documentation & examples to clarify.

Thanks.

Hykox commented 4 years ago

@Hykox There is a problem with your code

const grid = rooms.map( item => {
    return { title: item.attributes.name, itemId: 'test/'+item.attributes.name,}
})

const MenuItems = [grid]

The subnav property expects array of objects [{title: 'Chandler', itemId: "/test/" + 'Phoebe'}]

You have supplied [][]{} (array of array of objects)

I am not sure what you are trying to establish as the json is not attached herewith.

but please do checkout the documentation & examples to clarify.

Thanks.

Not solved a problem :(, i go check documentation

abhijithvijayan commented 4 years ago

array.map returns an array which makes grid an arrya of objects, which canbe directly fed into the subnav object

Hykox commented 4 years ago

array.map returns an array which makes grid an arrya of objects, which canbe directly fed into the subnav object

But I need to implements name and itemId, not include directly the data ?

abhijithvijayan commented 4 years ago
Tab A
   SubTab A
   SubTab B
   SubTab C
Tab B
   SubNav Z

Your approach should get you something like this if you provide two objects in array with another set of array as subNav item