Entrar Ainda não tem acesso?
3
respostas

Error no onClick

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

por Luiz Guilherme de Oliveira
| 3.9k xp | 2 posts

Estava seguindo a aula utilizando o projeto anterior, porém começou a dar erro no onClick. - Expected onClick listener to be a function, instead got a value of object type. -

Percebi que no console ele estava declarado como um objeto e não como uma função

function deletarColaborador(){
  console.log('XD')
}


  return (
      <div className="App">
        <Banner/>
        <Form posicoes={posicoes.map(posicao => posicao.nome)} aoJogador={jogador => aoNovoJogador(jogador)}/>
        {posicoes.map(posicao =><Time
            key={posicao.nome}
            nome={posicao.nome}
            corPrimaria={posicao.corPrimaria}
            corSecundaria={posicao.corSecundaria}
            jogadores={jogadores.filter(jogador => jogador.posicao === posicao.nome)}
            aoDeletar= {deletarColaborador}
            />
        )}
          <Rodape/>
      </div>
  );
}

export default App;

O que pode ser?

3 respostas
por Wilson Cabral Paiva
| 61.7k xp | 72 posts
Analista de Sistema

Neste trecho de código que você colocou está correto. O problema pode ser dentro do componente "Timer", podes compartilhar ele conosco para tentarmos encontrar o problema? E se possível poderias colocar o componente "App" completo também? Assim poderemos ver o ciclo completo.

por Luiz Guilherme de Oliveira
| 3.9k xp | 2 posts

Claro, vou deixar abaixo:

import './Jogador.css'

const Jogador=({nome, imagem, classi, corDeFundo, aoDeletar}) => {

    return (
        
    <div className='colaborador'> 
        <div className='deletar' onClick={aoDeletar}>deletar</div>
        <div className='cabecalho' style={{backgroundColor: corDeFundo}}>
            <img src={imagem} alt={nome} />
        </div>
        <div className='rodape'>
            <h4>{nome}</h4>
            <h5>{classi}</h5>
        </div>
            
    </div>
    )
}

export default Jogador

Quando eu troco as props separadas pelo jogador 

import './Jogador.css'

const Jogador=({jogador, corDeFundo, aoDeletar}) => {

    return (
        
    <div className='colaborador'> 
        <div className='deletar' onClick={aoDeletar}>deletar</div>
        <div className='cabecalho' style={{backgroundColor: corDeFundo}}>
            <img src={jogador.imagem} alt={jogador.nome} />
        </div>
        <div className='rodape'>
            <h4>{jogador.nome}</h4>
            <h5>{jogador.classi}</h5>
        </div>
            
    </div>
    )
}

export default Jogador

começa a dar erro na imagem, Cannot read properties of undefined (reading 'imagem')

Tks,

por Wilson Cabral Paiva
| 61.7k xp | 72 posts
Analista de Sistema

Está um pouco confuso aqui, mas vamos lá:

O componente "Timer" você passa a prop "jogadores" e depois dentro do método Jogador que eu acredito ser o seu componente você está desestruturando { jogador }, foi a primeira coisa que eu achei estranho, pois deveria ser "jogadores" ou se você deixar "jogador", tem que alterar a chamada do componente para "jogador" também.

Teu componente "Timer" é o método "Jogador"?

Tens como explicar melhor, pois eu acho que a desestruturação das props dentro desse componente esta errada.