How can I create a tab scheme with React Hooks?

Question

I am creating a system, and instead of putting the 'sub-categories' of entries below the menu, I am creating as tabs, when you click on each menu and then have the other accesses.

Example: by clicking on Registrations, update my content next to 'tabs' (Listgroup) of all types of registrations I will have. I would like you to select these items (register 1, register 2 ... in the image)update the page contents with the form fields. I searched for the useState of the Act, but I couldn’t understand how to implement it in this routine, could help me?

My tabs, I made as a horizontal list, using the component of the 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>
 

When selecting one of these items, I would like you to update the 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>

I’m using: NodeJs 14.15.5 React-bootstrap

Answer 1

There are two ways to solve this, follow the way you started and use useState or use the Bootstrap tab component that already has the behavior most similar to what you want.

Adding useState to your code

useState allows you to add a value to your component that you can modify through actions such as clicking, for example. I made an example by following your code:

import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
import Card from 'react-bootstrap/Card'

const counteudos = [
   'Conteudo 1',
   'Conteudo 2',
   'Conteudo 3',
   'Conteudo 4',
   'Conteudo 5',
   'Conteudo 6',
]

export default function App() {
  const [abaAtiva, setAbaAtiva] = React.useState(0)

  return (
    <React.Fragment>
      <ListGroup horizontal>
        <ListGroup.Item onClick={() => setAbaAtiva(0)} variant={abaAtiva === 0 ? 'primary' : 'info'}>teste 1</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(1)} variant={abaAtiva === 1 ? 'primary' : 'info'}>teste 2</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(2)} variant={abaAtiva === 2 ? 'primary' : 'info'}>teste 3</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(3)} variant={abaAtiva === 3 ? 'primary' : 'info'}>teste 4</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(4)} variant={abaAtiva === 4 ? 'primary' : 'info'}>teste 5</ListGroup.Item>
        <ListGroup.Item onClick={() => setAbaAtiva(5)} variant={abaAtiva === 5 ? 'primary' : 'info'}>teste 6</ListGroup.Item>
      </ListGroup>

      <Card>
        <Card.Header>
          <Card.Title as="h4">Mudar o conteúdo aqui</Card.Title>
          <p className="card-category">
            {counteudos[abaAtiva]}
          </p>
        </Card.Header>
        <Card.Body>
          ffff
        </Card.Body>
      </Card>
  </React.Fragment>
  );
}

Sandbox with this code running

Alternative solution: Tabs

With the Bootstrap Tabs component, you can do what you want without necessarily needing state usage. The first example of documentation is quite similar to what you want. The Tabs Code would look something like:

<Tabs defaultActiveKey="1">
  <Tab eventKey="1" title="test 1">
    Conteudo 1
  </Tab>
  <Tab eventKey="2" title="test 2">
    Conteudo 2
  </Tab>
  <Tab eventKey="3" title="test 3">
    Conteudo 3
  </Tab>
</Tabs>