[Dúvida] Como dar um valor inicial ao map() ao iniciar o navegador ?

Oi Carlos, tudo bem?

Obrigada por compartilhar sua dúvida conosco. Parece que você está enfrentando um problema com a renderização de conteúdo em seu projeto React, usando o método map() para renderizar o conteúdo e filter() para mudar o conteúdo selecionado.

Para adicionar um conteúdo inicial ao usar map(), você pode adicionar uma condição que verifique se há algum conteúdo inicial e renderize-o antes de fazer o mapeamento do restante do conteúdo. Por exemplo:

const menu = [/*seu array de menu*/];
const initialContent = [/*seu array de conteúdo inicial*/];

function App() {
  return (
    <div>
      {initialContent.map(item => (
        /*renderize seu conteúdo inicial*/
      ))}
      {menu.map(item => (
        /*renderize o restante do conteúdo*/
      ))}
    </div>
  );
}

Dessa forma, o conteúdo inicial será renderizado antes do restante do conteúdo.

Quanto à funcionalidade de filtragem usando filter(), você pode armazenar o estado atual do item selecionado e aplicar a filtragem com base nesse estado. Para isso, você pode usar o useState() para armazenar o estado atual do item selecionado e, em seguida, usar filter() para filtrar o conteúdo com base no item selecionado.

Por exemplo:

import { useState } from 'react';

const menu = [/*seu array de menu*/];

function App() {
  const [selectedItem, setSelectedItem] = useState(null);

  function handleSelectItem(item) {
    setSelectedItem(item);
  }

  const filteredContent = selectedItem
    ? menu.filter(item => item.category === selectedItem)
    : menu;

  return (
    <div>
      {/*Renderize seu mini-menu e permita que o usuário selecione o item*/}
      {filteredContent.map(item => (
        /*renderize o conteúdo filtrado*/
      ))}
    </div>
  );
}

Dessa forma, o conteúdo será filtrado com base no item selecionado pelo usuário.

Espero que essas sugestões sejam úteis para o seu projeto.

Um abraço e bons estudos.