app js da aplicação

app.js

import React, { useState } from "react";
import { Button, FormControl, Dropdown } from "react-bootstrap";

class CustomToggle extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.props.onClick(e);
  }

  render() {
    return (
      <a
        href="https://codesandbox.io/s/competent-pare-20l50"
        onClick={this.handleClick}
      >
        {this.props.children}
      </a>
    );
  }
}

class CustomMenu extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = { value: "" };
  }

  handleChange(e) {
    this.setState({ value: e.target.value.toLowerCase().trim() });
  }

  render() {
    const {
      children,
      style,
      className,
      "aria-labelledby": labeledBy
    } = this.props;

    const { value } = this.state;

    return (
      <div style={style} className={className} aria-labelledby={labeledBy}>
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="Type to filter..."
          onChange={this.handleChange}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            child =>
              !value || child.props.children.toLowerCase().startsWith(value)
          )}
        </ul>
      </div>
    );
  }
}

function App() {
  const [estados, setEstados] = useState([
    { id: 0, nome: "Medico", estado: false },
    { id: 1, nome: "Enfermeiro", estado: false },
    { id: 2, nome: "Auxiliar", estado: false }
  ]);

  function handleEst(index) {
    estados[index].estado = !estados[index].estado;
    setEstados([
      { id: 0, nome: "Medico", estado: false },
      { id: 1, nome: "Enfermeiro", estado: true },
      { id: 2, nome: "Auxiliar", estado: false }
    ]);
    console.log(estados);
  }

  return (
    <div className="App">
      <Dropdown>
        <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
          <Button>Cargos</Button>
        </Dropdown.Toggle>

        <Dropdown.Menu as={CustomMenu}>
          {estados.map((est, index) => (
            <Dropdown.Item
              key={est.id}
              active={est.estado}
              onClick={() => {
                handleEst(index);
              }}
            >
              {est.nome}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

export default App;