Estou criando um sistema, e ao invés de colocar as 'sub categorias' de cadastros abaixo do menu, estou criando como abas, quando você clica em cada menu e então possui os demais acessos.
Exemplo: ao clicar em Cadastros, atualiza o meu conteúdo ao lado com 'abas'(Listgroup) de todos os tipos de cadastros que vou ter. Gostaria que ao selecionar estes itens(cadastro 1, cadastros 2 ... na imagem)atualizasse o conteúdo da página com os campos de formulários.
Pesquisei pelo useState
do react, mas não consegui entender como implementar ele nesta rotina, poderiam me ajudar?
As minhas abas, eu fiz como uma lista na horizontal, utilizando o componente do react-botstrap (Listgroup).
<ListGroup horizontal>
<ListGroup.Item variant="info">teste 1</ListGroup.Item>
<ListGroup.Item variant="info">teste 2</ListGroup.Item>
<ListGroup.Item variant="info">teste 3</ListGroup.Item>
<ListGroup.Item variant="info">teste 4</ListGroup.Item>
<ListGroup.Item variant="info">teste 5</ListGroup.Item>
<ListGroup.Item variant="primary">teste 6</ListGroup.Item>
</ListGroup>
Ao selecionar um destes itens, gostaria que atualizasse o Card
.
<Card>
<Card.Header>
<Card.Title as="h4">Mudar o conteúdo aqui</Card.Title>
<p className="card-category">
Conteúdo aqui
</p>
</Card.Header>
<Card.Body>
ffff
</Card.Body>
</Card>
Estou utilizando:
NodeJs 14.15.5
React-bootstrap