How to receive a function in the onClick of a component

Asked

Viewed 158 times

-2

I’m trying some ways but it doesn’t work, I put a string in the console.log to confirm. but will not, this is the component with a button, I tried to call with onClick but it did not work



class CardProduto extends React.Component {
  render() {
    return (
      <ContainerProduto>
        <img src={this.props.urlImagem} alt={"imagem-produto"} />
        <p>{this.props.nome}</p>
        <p>{this.props.preco}</p>
        <button onClick={this.props.adiciona} >Adicionar ao 
        Carrinho</button>
      </ContainerProduto>
    );
  }
}

export default CardProduto;```






>esse é o componente pai




```import React from 'react';
import CardProduto from './components/CardProduto.js'

class App extends React.Component {

  state = {
    produtos: [
      {
        imagem: "https://picsum.photos/300/150?a=1",
        nome: "Item A",
        preco: 199.00,
        adiciona: false 
      },

    ],

  }
  adicionaProdutoAoCarrinho = () => {
    console.log("Adiciona ao Carrinho",this.state.adiciona)
  }


  render() {
    const listaProdutos = this.state.produtos.map (produto => {
      return (
        <CardProduto key = {produto.nome}
          urlImagem={produto.imagem}
          nome={produto.nome}
          preco={produto.preco}
          adiciona={produto.adiciona}

        />
      )
    })


    return (
      <div>
        <div>
          <p>

          </p>
        </div>
        <div>{listaProdutos}</div>
      </div>
    );
  }
}

export default App;```

> criei essa função adicionaProdutoAoCarrinho, pra sinalizar quando o botão receber um click. daí o o produto seria add ao carrinho e tals
react

  • maybe I expressed myself wrong: The button is inside a component (Cardproduto.js) and I want that when clicking the button invoke the function of adding the item of the array that is in the state( Boolean - the state is in the parent element App.js) for a new function (case true) adds in the cart.

2 answers

1

To call a component event in React passed by props use as follows:

App.js

import React from "react";
import "./styles.css";
import Button from "./container/Button";

export default function App() {
  function handleClick(e) {
    e.preventDefault();
    console.log("cliquei");
  }

  return (
    <div className="App">
      <Button evento={handleClick} />
    </div>
  );
}

Components/Button/index.js

import React from "react";

export default function Button({ evento }) {
  return <button onClick={evento}>Botão teste</button>;
}

  • I think that’s not it, maybe I said it wrong:

0

From what I understand, you want the 'Add to Cart' button of the 'Cardproduto.js' component to call a function that is in the 'App.js' parent component. You have correctly passed from a prop to the child component, but in return you are not changing anything. You need to change the state of a variable in the return of the button, so I would do it this way:

Cardproduto.js

export default class CardProduto extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.adiciona()}>Adicionar ao Carrinho</button>
      </div>
    );
  }
}

App.js

export default class App extends React.Component {
  state = {
     adiciona: false
  }

  function handleAdd(){
     this.setState({
        adiciona: true
     });
  }

  render() {
    return (
      <div>
         <CardProduto adiciona={this.handleAdd()}/>
      </div>
    );
  }
}

I hope I’ve cured your doubt.

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.