Help you create a menu component in React

Question

It may seem like maybe I’m trying to reinvent the wheel, with a number of components available to use. But I set myself the challenge of being able to build my own menu. Just for learning. Perhaps this reason justifies wasting time "reinventing the wheel".

Let’s get down to the problem:

Menu configuration file:

export default {
items: [
    {
        name: 'Home 1',
        url: '/',
    },
    {
        name: 'Pré-inspeção',
        url: '/pre-inspecao/',
        children:[
            {
                name: `Planejamento`,
                url: '/planejamento/',
                children:[
                    {
                        name: 'Nova Inspeção',
                        url: '/pre-inspecao/nova',
                    },
                    {
                        name: 'Inspeções',
                        url: '/pre-inspecao/lista',
                    },
                ]
            },
            {
                name: 'Equipe',
                url: '/equipe/',
                children:[
                    {
                        name: 'Inspeções',
                        url: '/equipe/inspecao/lista',
                    }
                ]
            }
        ]
    },
]

}

Item handling file and menu mount (test version)

import React from 'react'

import navConfig from '../../Route/navConfig.jsx'

export default function SideBarMenu()
{

    //console.log(navConfig);

    const {items} = navConfig;

    const menu = '';

    var strAux = ''

    function criaMenu(items)
    {

            items.map(function(item, i)
                {
                    strAux += "<ul>"

                    adicionaItemMenu(item);
                    strAux += "</ul>"
                }
            )
        return strAux;

    }

    function adicionaItemMenu(item)
    {
        // console.log('adiciona')
        // console.log(item)
        // console.log('fim - adiciona')
        if(item.children && item.children.length > 0)
        {
            // console.log('---')
            // console.log(item.children)
            strAux += "<li>" + item.name + "</li>"
            item.children.map(function(itemAux,i)
                {
                    strAux += "<li>"
                        criaMenu([itemAux])
                        strAux += "</li>"
                }
            )
            //criaMenu([item])

        }
        else{
            strAux += "<li>" + item.name + "</li>"
        }
    }

    return(
        criaMenu(items)
    )

}

this trial version is working. It returns me a string with all the uls and lis positioned correctly. but I would like it to actually return me the html elements and such and such. so I tried to rewrite it to achieve the goal, and it is in this second version that I am encountering difficulties, I do not know if they are difficulties for being beginner, for being trying a wrong implementation concept, or even for the two reasons previous kkkkk Follows the code:

import React from 'react'

import navConfig from '../../Route/navConfig.jsx'

export default function SideBarMenu()
{

    //console.log(navConfig);

    const {items} = navConfig;

    const menu = '';

    var strAux = ''

    function criaMenu(items)
    {
        return(
            items.map(function(item, i)
                {
                    <ul>
                    {
                        adicionaItemMenu(item)
                    }
                    </ul>
                }
            )
        )

    }

    function adicionaItemMenu(item)
    {
        // console.log('adiciona')
        // console.log(item)
        // console.log('fim - adiciona')
        if(item.children && item.children.length > 0)
        {
            // console.log('---')
            // console.log(item.children)
            return(
                <div>
                    <li>{item.name}</li>
                    {
                        item.children.map(function(itemAux,i)
                            {
                                <li>
                                    {
                                        criaMenu([itemAux])
                                    }

                                </li>
                            }
                        )
                    }
                </div>
            )            
        }
        else{
            return(
                <li>{item.name}</li>
            )
        }
    }

    return(
        <div>
            {
                criaMenu(items)
            }
        </div>

    )
}

Hence I’m getting this error msg:

**Failed to compile

./src/Components/SideBarMenu/index.jsx

  Line 21:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

  Line 47:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.**

Answer 1

This is Damasio, all right? Inside its map function was missing a Return.

Below is an excerpt that can help you. I used the concept of Arrow Function, but left a comment as it would be using Function tbm.

I hope it helps you.

function criaMenu(items) {
  // vou usar o conceito de arrow function, mas no seu caso seria assim:
  // return items.map(function(item, i) {
  //   return <ul>{adicionaItemMenu(item)}</ul>;
  // });

  // Com arrow function:

  return items.map((item, index) => (
    <ul key={index}>{adicionaItemMenu(item)}</ul>
  ));
  // IMPORTANTE: usar o index como key não é uma pratica legal.
}

function adicionaItemMenu(item) {
  if (item.children && item.children.length > 0) {
    return (
      <>
        <li>{item.name}</li>
        {item.children.map((itemAux, i) => (
          <li key={i}>{criaMenu([itemAux])}</li>
        ))}
      </>
    );
  } else {
    return <li>{item.name}</li>;
  }
}