score:0

Accepted answer

i am assuming you would like to get a list of areas, each with their bars underneath?

you can embed a second map within the first to achieve this:

            {data.map((value) => 
            <div>
                <contentitem title={value.area} key={value.area}/>
                {value.bar.map(bar=> 
                    <barnavigation id={bar.title} key={bar.title}/>)}
            </div>
            )}

the full block would look something like:

const data = [
    {
        area: 'avenyn', 
        bar: [
          {
            title: 'yaki-da', 
            image: '', 
            info: 'fdsfsdfsdfsdfsdfsdf'
          }, 
          {
            title: 'lounge', 
            image: '', 
            info: 'fdsfsdfsdfsdfsdfsdf'
          }, 
          {
            title: 'hardrock-cafe', 
            image: '', 
            info: 'fdsfsdfsdfsdfsdfsdf'
          },
          {
            title: 'valand', 
            image: '', 
            info: 'fdsfsdfsdfsdfsdfsdf'
          },
        ], 
    },
    {
      area: 'hisingen', 
      bar: [
        {
          title: 'ölstugan', 
          image: '', 
          info: 'fdsfsdfsdfsdfsdfsdf'
        }, 
      ],
    }
  ]
  
  const mypage = () => {
      return (
        <div style={rootstyle}>
          <switch>
              <route exact path="/"> 
                {data.map((value) => 
                <div>
                    <contentitem title={value.area} key={value.area}/>
                    {value.bar.map(bar=> 
                        <barnavigation id={bar.title} key={bar.title}/>)}
                </div>
                )}
              </route>
               {data.map((value) => 
                <route path={'/' + value.area}>
                  {bars.map((value: string) => <barnavigation id={value} key={value}/>)}
                </route>
              )} 
          </switch>
        </div>
      );
  }

Related Query

More Query from same tag