CODEWITHSUNDEEP
javascriptnode.jsreactjs
rashmedo
rashmedo

Reputation: 7

need to find a code to call two functions when div is clicked in react

I basically need to create an array or make a list of items that have been clicked in this div imgCard. its for a game where i have to update score when a button is clicked. If its clicked more than once the game ends. My only guess is that I should pass two functions on onClick and create an array of items already clicked.

import React, { Component, Fragment } from 'react'
import Header from './components/header'
import characters from "./characters.json"
import ImageCard from "./components/ImageCard"
import Wrapper from './components/wrapper'

class Game extends Component { 
  state = { 
    characters,
    Header,
  }

  shuffle = () => {
    var array = this.state.characters;
    var ctr = array.length;
    var temp;
    var index;
    var isClicked = []

    while (ctr > 0) {
      index = Math.floor(Math.random() * ctr);
      ctr--;
      temp = array[ctr];
      array[ctr] = array[index];
      array[index] = temp;
    }

    this.setState({
        characters: array
    });
  };

  render() {
    return (
      <Fragment>
        <Header />
        <Wrapper>
          <div className="imgContainer" >
            {this.state.characters.map(character => (
              <div className="imgCard" onClick={this.onClick} showAlert={this.id}>
                <ImageCard
                  key={character.id}
                  image={character.image}
                  width={'120px'}
                >
                </ImageCard >
              </div>
            ))}
          </div>
        </Wrapper>
      </Fragment>
    );
  }
}

export default Game;

Upvotes: 1

Views: 43

Answers (3)

Corbuk
Corbuk

Reputation: 710

You can just call a function which contains the two function you want to run. With your code it would look something like below:

class Game extends Component { 
  state = { 
    characters,
    Header,
  }

  shuffle = () => {
    var array = this.state.characters;
    var ctr = array.length;
    var temp;
    var index;
    var isClicked = []

    while (ctr > 0) {
      index = Math.floor(Math.random() * ctr);
      ctr--;
      temp = array[ctr];
      array[ctr] = array[index];
      array[index] = temp;
    }

    this.setState({
        characters: array
    });
  };

  buttonOnClickHandler = () => {
    // Destructure state or props here.

    //Performe anything else

    //run the functions
    this.firstFunctionYouWantToRun();
    this.secondFunctionYouWantToRun();
  };

  render() {
    return (
      <Fragment>
        <Header />
        <Wrapper>
          <div className="imgContainer" >
            {this.state.characters.map(character => (
              <div className="imgCard" onClick={this.buttonOnClickHandler} showAlert={this.id}>
                <ImageCard
                  key={character.id}
                  image={character.image}
                  width={'120px'}
                >
                </ImageCard >
              </div>
            ))}
          </div>
        </Wrapper>
      </Fragment>
    );
  }
}

export default Game;

Upvotes: 1

iambinodstha
iambinodstha

Reputation: 1007

<div className="imgCard"
onClick={()=>{
  this.firstFunction();
  this.secondFunction();  //two functions are called in onClick callback
}}
showAlert={this.id}>
   <ImageCard
      key={character.id}
      image={character.image}
      width={'120px'}
   >
   </ImageCard >
</div>

Upvotes: 1

Kishan Jaiswal
Kishan Jaiswal

Reputation: 664

Like this, you can call

onClick={() => {this.onClick() ; this.somefucntionname()}}

Upvotes: 0

Related Questions