Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

Referente ao curso React: como os componentes funcionam, no capítulo O que são componentes e atividade Criando o botão deletar

por FELIPE CESAR DIAS

| 542.7k xp | 20 posts

Pessoal,

Estou adaptando o projeto para uma lista de compras e estou parado em um erro que não encontrei solução... se alguém puder me ajudar eu agradeço.

O erro que aparece é: Warning: Expected onClick listener to be a function, instead got a value of object type

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Aqui está meu App.js

Onde eu crio a função deletarProduto e invoco ela na Lista quando chamo o aoDeletar


import { useState } from 'react'
import Banner from './componentes/Banner';
import Formulario from './componentes/Formulario';
import Lista from './componentes/Lista';

function App() {

  const categorias = [
    'Frutas',
    'Verduras e Legumes',
    'Limpeza',
    'Enlatados'
]

  function deletarProduto() {
    console.log('deletando produto')
  }

  const [produtos, setProdutos] = useState([])

  const produtoAdicionado = (produto) => {
    // console.log(produto)
    setProdutos([...produtos, produto])
  }

  return (
    <div className="App">
      <Banner />
      <Formulario categorias={categorias} produtoCadastrado={produto => produtoAdicionado(produto)}/>
      <div className='lista-categoria'>
        {categorias.map(categoria => 
          <Lista 
            key={categoria} 
            categoria={categoria} 
            produtos={produtos.filter(produto => produto.categoria === categoria)}
            aoDeletar={deletarProduto}
          />
        )}
      </div>
    </div>
  );
}

export default App;

Segue o arquivo Lista.js onde passo o aoDeletar para deletar um produto da lista

import Produto from '../Produto'
import './Lista.css'

const Lista = (props, aoDeletar) => {
    return (
        props.produtos.length > 0 && <section className='lista'>
            <h3>{props.categoria}</h3>
            <div>
                {props.produtos.map(produto => {
                    return <Produto key={produto.produto} produto={produto.produto} aoDeletar={aoDeletar} />
                })}
            </div>
        </section>
    )
}

export default Lista

E por último o arquivo Produto.js onde tem o botão com o onClick

import './Produto.css'

const Produto = (props, aoDeletar) => {
    return (
        <div className='produto'>
            <p>{props.produto}</p>
            <div className='deletar' onClick={aoDeletar}>Deletar</div>
        </div>
    )
}

export default Produto

Eu tentei a seguinte solução. em várias páginas (stackoverflow e cia...) indicam que no onClick devemos colocar uma arrow function ( onClick={() => aoDeletar} ) isso de fato eliminou o erro mas não chama a função aoDeletar que invoca a deletarProduto e deveria aparecer o console.log ('deletando produto').

Muito obrigado pela ajuda.

4 respostas

solução!

por Renan Lima

| 2903.3k xp | 6057 posts

Instrutor Scuba Team

08/02/2023

Olá, Felipe.

Tudo bem?

Eu aconselho você passar todas props declaradamente, ai no caso em vez de passar props, aoDeletar.

Você passa o produto direto e o aoDeletar:

const Produto = ({produto, aoDeletar}) => {
    return (

Como no exemplo acima, você precisa abrir e fechar as chaves nos parâmetros dos componentes.

Espero ter ajudado. Qualquer dúvida manda aqui.

por FELIPE CESAR DIAS

| 542.7k xp | 20 posts

08/02/2023

Excelente Renan!

Muito obrigado pela ajuda, mas gostaria de entender o que muda em passar as props declaradamente e não declarada.

Se for possível uma explicação agradeceria ainda mais.

Abraços!

por Renan Lima

| 2903.3k xp | 6057 posts

Instrutor Scuba Team

08/02/2023

Você pode optar em passar tudo como props, ou na forma declarativa, desestruturada:

PROPS:

Parâmetro componente:

const Produto = (props) => {
    return (

Utilizando:

return <Produto key={props.produto} produto={props.produto} aoDeletar={props.aoDeletar} />

OU DECLARADO:

Parâmetro componente:

const Produto = ({produto, aoDeletar}) => {
    return (

Utilizando:

return <Produto key={produto.produto} produto={produto.produto} aoDeletar={aoDeletar} />

No caso você estava tentando utilizar das duas formas ao mesmo tempo, com props, e declarativa que é a forma desestruturada.

por Marcos Maio

| 113.5k xp | 14 posts

21/02/2023

oi eu to tendo o mesmo problema que o amigo acima só que eu não consegui resolver , eu a principio usava apenas props como parametro e então fui criar uma função aoDeletar e chamei aqui como parametro só que começou a dar um erro Warning: Expected onClick listener to be a function, instead got a value of object type , então eu passei as props declaradamente em vez de passar props passei jogador , só que agora ta dando outro erro Uncaught TypeError: Cannot read properties of undefined (reading 'jogadores'). const Time =({jogador, aoDeletar}) => {

return (
    (jogador.jogadores.length > 0) ? 
    <section className='time' style={{backgroundColor: jogador.corDeFundo}}>
        <h3 style={{color: jogador.corDoCard}}>{jogador.nome}</h3>
        <div className='jogadores'>
            {jogador.jogadores.map(jogador => {
            return <Jogador key={jogador.nome} jogador={jogador} corDoCard={jogador.corDoCard} 
            nome={jogador.nome} função={jogador.função} imagem={jogador.imagem} personagem={jogador.personagem} avatar={jogador.avatar} aoDeletar={aoDeletar} />;
            })}
            </div>
    </section>
    : ''
)

}

export default Time

ta dando erro aqui nessa linha (jogador.jogadores.length > 0) ? , por que antes erra props.jogadores