How to accept more than 1 parameters in onClick React

Question

Hello Im a beginner in React have a button in a react component and I want to pass 2 options to its onClick method, something like:

  handleClick = clickType => {
    const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
<button onClick={() => this.handleClick(), this.back} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={() => this.handleClick('next'), this.continue} className='next'>ادامه</button>

How can I achieve this correctly?

Try This onClick={e => this.handleClick(e, this.back)}

Qubaish Bhatti
– Qubaish Bhatti

2020-04-16 07:26:12 +00:00
Commented Apr 16, 2020 at 7:26 — Qubaish Bhatti
– Qubaish Bhatti, Commented Apr 16, 2020 at 7:26
onClick={(e) => {this.handleClick(); this.back(e)}}

HMR
– HMR

2020-04-16 07:26:46 +00:00
Commented Apr 16, 2020 at 7:26 — HMR
– HMR, Commented Apr 16, 2020 at 7:26

Ayyoub · Accepted Answer · 2020-04-16 07:41:53Z

The arrow function inside the onClick can have execute more than one function.

It is still a function, and you can put code in it ;)

But maybe you can improve your current code :

handleClick = clickType => {
        const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
<button onClick={(e) => { this.handleClick(); this.back(e); }} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={() => { this.handleClick('next'); this.continue(e); }} className='next'>ادامه</button>

By this version:

handleNext = (e) => {
  const { currentStep } = this.state;

  if (currentStep >= 0 && currentStep <= 5) {
    this.setState({
      currentStep: currentStep++
    });
  }

  this.props.nextStep();
}

handlePrevious = (e) => {
  const { currentStep } = this.state;

  if (currentStep > 0 && currentStep <= 5) {
    this.setState({
      currentStep: currentStep--
    });
  }

  this.props.prevStep();
}


<button onClick={this.handlePrevious} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={this.handleNext} className='next'>ادامه</button>

Barry Michael Doyle · Accepted Answer · 2020-04-16 07:46:55Z

1

You need to setup your handling function differently.

Rather have something like this:

handleBack = e => {
  e.preventDefault()

  if (this.state.currentStep > 1) {
    this.setState((prevState) => ({
      currentStep: prevState.currentStep - 1
    }));
  }

  this.props.prevStep()
}

handleNext = e => {
  e.preventDefault()

  if (this.state.currentStep < 6) {
    this.setState((prevState) => ({
      currentStep: prevState.currentStep + 1
    }));
  }

  this.props.nextStep()
}

<button onClick={this.handleBack} ... />
<button onClick={this.handleNext} ... />

This method is a lot cleaner and it easier to read because each function deals with its own click.

Now you can easily see exactly what is happening when you click back, and exactly what is happening when you click next.

edited Apr 16, 2020 at 7:46

answered Apr 16, 2020 at 7:29

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

Comments

AhsanBilal · Accepted Answer · 2020-04-16 08:34:21Z

You can use something like this

/**
I copied this function from code, please make sure that its working.
*/
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  updateStep = step => {
   if (step > 0 && step <= 6)
     this.setState({
       currentStep: newStep
     });
  }

  /**
  Try to avoid the keywords like continue, break, for, while etc as 
  variable or function names.

 */
  handleContinue = e => {
    e.preventDefault();
    this.handleClick(this.state.currentStep+1);
    this.props.nextStep();
  };

  handleBack = e => {
    e.preventDefault();
    this.handleClick(this.state.currentStep-1);
    this.props.prevStep();
  };


<button onClick={this.handleBack} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={this.handleContinue} className='next'>ادامه</button>

Collectives™ on Stack Overflow

How to accept more than 1 parameters in onClick React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related