[Dúvida] Implementação minha não funcionou

Olá, Gustavo!

O problema no seu código está no uso do método forEach para tentar renderizar os itens da lista. O método forEach é utilizado para executar uma função em cada elemento de um array, mas ele não retorna nada, ou seja, ele não é adequado para renderizar elementos diretamente no JSX.

Para resolver isso, você pode usar o método map em vez de forEach. O map funciona de forma semelhante ao forEach, mas ele retorna um novo array com os resultados da função aplicada, o que é ideal para renderização no JSX. Aqui está como você pode ajustar seu código:

import './style.css'

const options =  ['CATEGORIAS', 'MINHA ESTANTE', 'FAVORITOS'];

function Menu () {
    return (
        <ul className='Menu'>
          {options.map(option => (
            <li className='Menu-item'><p>{ option }</p></li>
          ))}
        </ul>
    )
}

export default Menu;

Neste código, substituí options.forEach por options.map, e agora cada opção será corretamente transformada em um elemento <li> que será renderizado na lista <ul>.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Entendido! Eu estava com essa dúvida de porque funcionou com map mas não funcionou com o forEach.

Obrigado!