2

Estou usando o map para fazer uma listagem de produtos, até aí tranquilo, porém no layout há um dropdown onde iremos apresentar mais informações daquele item, até aí tranquilo também.

Porém meu problema é que quando abro a dropdown de um produto específico, ele abre a dropdown de todos os produtos. Gostaria de saber como poderia passar um parâmetro para ele identificar e abrir apenas o dropdown do produto específico.

Segue o trecho do código do JSX:

{this.state.products.map(product => (
   <tr className="list-item-row-payment" key={product.id}>
         <td>{product.id}</td> 
         <td>{product.name}</td>       
         <td>
            <div className="itens-acoes">
                <button onClick={() => this.showDropdownDoc()}>More</button>
                <div className={this.state.DropdownDoc}>
                    <td>{product.origin}</td>
                    <td>{product.link}</td> 
                </div>
            </div>
         </td>
    </tr>
  ))}

OBS: Estou usando CSS com display none para ocultar através do estado.

Função do dropdown:

showDropdownDoc = () => {
    if (this.state.DropdownDoc === "true") {
        this.setState({ DropdownDoc: "hide" });
        console.log(this.state)
    } else {
        this.setState({ DropdownDoc: "true" });
    }
}

Meu state:

this.state = {  
   DropdownDoc: "hide",
}
1
  • Converta o trecho de codigo onde você renderiza suas trs em um Novo componente do React. Dessa forma você poderá manter o estado do dropdown em cada componente filho. <ComponenteFilho product={product} /> 5/05/2020 às 17:30

1 Resposta 1

2

A solução que eu utilizaria nesse caso seria um ternário que provocaria as seguintes alterações no código: Passaria a receber o index no map:

this.state.products.map((product,index) => (

Passaria este index para a função showDropdownDoc:

<button onClick={() => this.showDropdownDoc(index)}>More</button>

Receberia dentro da função e salvaria este index no state:

   showDropdownDoc = (indexPassado) => {
        if (this.state.DropdownDoc === "true") {
            this.setState({ DropdownDoc: "hide", index: indexPassado });

Colocaria a propriedade index no state:

this.state = {  
   DropdownDoc: "hide",
   index: '',
}

E onde você passa o className validaria se está no index correto de quando foi clicado:

               <div className={(index===this.state.index)?this.state.DropdownDoc:true}>
                    <td>{product.origin}</td>
                    <td>{product.link}</td> 
                </div>

Há outras formas de fazer o mesmo deixando mais simples, mas com a logicá já construída essa foi a solução que consegui encontrar.

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 .