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?

Answer 1

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>

Answer 2

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.

Answer 3

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>