Try to use with a json file

[Hykox]

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]

I will look into this :smiley:

[abhijithvijayan]

@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]

@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]

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

[Hykox]

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]

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