Onclick with two functions- React

Question

How can I call two functions via onclick? I have the following code, and with each click the status is updated. I wish, however, that the timer method was also called.

<Button className="btn-link" color="primary" size="lg" style={{ position: "absolute", left: 250 }} onClick={() => this.setState({ index: 1, visibility: true })}>160x600</Button>

the timer method:

timer() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }

    this.timeout = setTimeout(() => {
      this.setState({ visibility: false });
    }, 7000);
  }
  

this is the complete component code.

import React, { Component } from "react";
import { Button } from 'reactstrap';

class PubblicitaPulsanti extends Component {
  state = {
    index: 0,
    iframeSrcs: ["/300x250", "/160x600", "/468x60", "/728x90"],
    heightSrcs: [250, 600, 60, 90],
    widthSrcs: [300, 160, 468, 728],
    visibility: false,
    leftSrcs: [1230, 50, 500, 400],
    rightSrcs: [0, 0, 20, 20],
    topSrcs: [10, 10, 500, 500]
  };

  componentDidMount() {
    document.addEventListener("keydown", this.onKeyDown.bind(this));
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.onKeyDown.bind(this));
  }


  onKeyDown(event) {
    if (event.keyCode === 17) {
      this.reload();
    }
    if (event.keyCode === 96) {
      this.setState({ index: 0, visibility: true });
    }
    if (event.keyCode === 97) {
      this.setState({ index: 1, visibility: true });
    }
    if (event.keyCode === 98) {
      this.setState({ index: 2, visibility: true });
    }
    if (event.keyCode === 99) {
      this.setState({ index: 3, visibility: true });
    }
    this.timer();
  }

  timer() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }

    this.timeout = setTimeout(() => {
      this.setState({ visibility: false });
    }, 7000);
  }

  handleClick1 = (evt) => {
    this.setState({ index: 1, visibility: true });
    this.timer();
  }



  handleClick = (evt) => {
    this.setState({ index: 2, visibility: true });
    this.timer()

  }

  handleClick3 = (evt) => {
    this.setState({ index: 3, visibility: true });
    this.timer()
  }

  handleClick4 = (evt) => {
    this.setState({ index: 0, visibility: true })
      ;
    this.timer()
  }

  reload() {
    const iframeLength = this.state.iframeSrcs.length;
    if (this.state.index < iframeLength) {
      this.setState({
        index: this.state.index + 1,
        visibility: true
      });
    } else {
      this.setState({ index: 0, visibility: true }); //starting again
    }
    this.timer();
  }

  render() {
    return (
      <div>

        <div>
          {this.state.visibility ? (
            <iframe
              style={{
                position: "absolute",
                left: this.state.leftSrcs[this.state.index],
                right: this.state.rightSrcs[this.state.index],
                top: this.state.topSrcs[this.state.index]
              }}
              key={this.state.index}
              title="AdSlot"
              src={this.state.iframeSrcs[this.state.index]}
              height={this.state.heightSrcs[this.state.index]}
              width={this.state.widthSrcs[this.state.index]}
              scrolling="no"
              frameborder="0"
              allowFullScreen="true"
            />
          ) : (
              ""
            )}
        </div>
        <div>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 129 }}
            onClick={() => this.handleClick.bind(this)}>160x600</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 509 }}
            onClick={() => this.setState({ index: 3, visibility: true })}>728x90</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 888 }}
            onClick={() => this.setState({ index: 2, visibility: true })}>468x60</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 1267 }}
            onClick={() => this.setState({ index: 0, visibility: true })}>300x250</Button>

        </div >
      </div >
    );
  }
}
export default PubblicitaPulsanti;

Can anyone help me?

Answer 1

You can create a wrapper method that calls both:

handleClick = (evt) => {
   this.setState({ index: 1, visibility: true });
   this.timer();
}

And update your button to have:

onClick={this.handleClick}

EDIT:

You might be having a race condition where you set visibility to true, but then the timer sets it to false. In that case, you can call the timer after the initial state change is complete:

this.setState({ index: 1, visibility: true }, () => {
   // Run timer as a callback here:
   this.timer();
});