Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

React: usando onClick

Boa tarde, Estou puxando dados por uma requisição AXION e jogando em uma tabela, até ai tudo bem porem quero que junto das TD seja acrescentado um BUTTON e esse BUTTON ira conter um onClick com a função deletar.

    renderProduto(Produto, index) {
        return (
            <tr key={index}>
                <td>{Produto.id}</td>
                <td>{Produto.descricao}</td>
                        <td>
                             <button type="button" className="btn btn-warning">onClick={this.deletar}</button>
                         </td>
            </tr>
        )
    }

Porem me retorna um erro

TypeError: Cannot read property 'deletar' of undefined
renderProduto
C:/Users/Prog05/Documents/Denis/Alura/Denis/produtos - Copia/src/App.js:100
   97 |         <td>{Produto.id}</td>
   98 |         <td>{Produto.descricao}</td>
   99 |                 <td>
> 100 |                      <button type="button" className="btn btn-warning">onClick={this.deletar}</button>
  101 |                  </td>
  102 |     </tr>
  103 | )
View compiled
App.render
C:/Users/Prog05/Documents/Denis/Alura/Denis/produtos - Copia/src/App.js:159
  156 |         </tr>
  157 |     </thead>
  158 |     <tbody>
> 159 |         {Produtos.map(this.renderProduto)}
  160 | 
  161 |     </tbody>
  162 | </table>
View compiled
finishClassComponent
1 resposta
solução!

Opa Denis, tudo bem? Do jeito que você colocou ali, a função está dentro do conteúdo da tag button, não deveria estar no atributo?

<button type="button" className="btn btn-warning" onClick={this.deletar}></button>

Outro porém, acho que neste caso o this estará referenciando o button e não o seu componente. Então você vai "precisar" fazer o bind do this.

<button type="button" className="btn btn-warning" onClick={this.deletar.bind(this)}></button>