2

Estou tentando bolar uma lógica de um toggle, que ativa/desativa uma espécie de filtro, porém agora preciso implementar uma nova funcionalidade nele, ele funciona assim, se eu click em um button de categoria, ele faz uma requisição, muda pra on (o que faz alguns itens serem renderizados em meu outro componente, passo via context api), se eu clico dnv, ele muda pra off e a renderização volta ao que era antes, o problema é, preciso implementa-lo para funcionar com mais de um button de categoria, ou seja, se eu clicar em uma categoria (ele fica on) e clicar em outra categoria (ele muda pra off), o que na verdade não deveria ocorrer.

    function toggleFunc(serviceEndpoint, category) {
      onClickCategoryFetch(serviceEndpoint, category);
      setToggle((prevToggle) => !prevToggle);
    }

    return Object.values(typeCategory)
      .slice(0, FIRST_FIVE_CATEGORY)
      .map((category) => (
        <button
          type="button"
          key={ `${category.strCategory}` }
          data-testid={ `${category.strCategory}-category-filter` }
          onClick={ () => toggleFunc(endpoint, category.strCategory) }
        >
          {category.strCategory}
        </button>
      ));
  }

2 Respostas 2

2

Quando se trabalha com vários estados e vários <button/> cada botão tem que possuir o seu próprio estado, para que o mesmo tenha o seu controle e não se choque com os outros estados. Pode ser feito de várias formas, por exemplo criar um estado para cada <button/> ou então um objeto com estados (eu recomendo esse) então com isso vou representar em um exemplo mínimo essas palavras e tentar dar um norte plausível para que consiga entender a lógica:

Component:

class App extends React.Component {
    state = {
      buttons: [{
        id: 1,
        name: "Button 1",
        isStatus: false
      },{
        id: 2,
        name: "Button 2",
        isStatus: true
      },{
        id: 3,
        name: "Button 3",
        isStatus: false
      }]
    }    
    constructor() {
      super();
      this.onClickChangeStatus = 
        this.onClickChangeStatus.bind(this);
    }
    onClickChangeStatus(id) {
      const buttons = this
        .state
        .buttons
        .map(x => {
          if (x.id === id) {
            x.isStatus = !x.isStatus;
          }
          return x;
        }); 
        this.setState({buttons});
    }
    render() {
      const { buttons } = this.state; 
      return (
        <div>
        {buttons.map((e,i) => (
          <div style={{padding: 10}}>
            <button onClick={x => this.onClickChangeStatus(e.id)}>
              {e.name}
            </button>
            <span style={{padding: 10}}>
              {e.isStatus? "On": "Off" }
            </span>
          </div>
        ))}
        </div>
      )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>


Function:

function App() {
  const [buttons, setButtons] = React.useState([
      {
        id: 1,
        name: "Button 1",
        isStatus: false
      },{
        id: 2,
        name: "Button 2",
        isStatus: true
      },{
        id: 3,
        name: "Button 3",
        isStatus: false
      }]
    );
   
    function onClickChangeStatus(id) {
      const c = buttons.map(c => {
        if (c.id === id){
          c.isStatus = !c.isStatus;
        }
        return c;
      });
      setButtons(c);
    }    
    
    return (
      <div>
      {buttons.map((e,i) => (
        <div style={{padding: 10}}>
          <button onClick={x => onClickChangeStatus(e.id)}>
            {e.name}
          </button>
          <span style={{padding: 10}}>
            {e.isStatus? "On": "Off"}
          </span>
        </div>
      ))}
      </div>      
    )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

1
  • Muito obrigado pela ajuda, gostei da abstração, consegue resolver de uma maneira muito boa! Commented 27/03/2021 às 8:24
0

Para consulta de pessoas com um problema semelhante, resolvi da seguinte maneira:

No provider criei um toggle

 const [toggle, setToggle] = useState(false);

No componente, criei um estado para guardar a categoria, resgatei essa categoria no value do button e enviei para a função

const [selectedCategory, setSelectedCategory] = useState('all');

   <button
     type="button"
     key={ `${category.strCategory}` }
     value={ `${category.strCategory}` }
     data-testid={ `${category.strCategory}-category-filter` }
     onClick={ (e) => toggleFunc(endpoint, category.strCategory, e.target.value) }
    >
      {category.strCategory}
    </button>

e na função, criei uma condicional:

async function toggleFunc([serviceEndpoint, category], categoryValue) {
      await onClickCategoryFetch(serviceEndpoint, category);
      if (categoryValue !== 'all') {
        setSelectedCategory(categoryValue);
        if (selectedCategory === categoryValue) setToggle(false);
        else setToggle(true);
      } else setToggle(false);
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .