如何在React中的props中发送两个参数函数？

Question

I have a function which takes two arguments earlier it used to take only one argument so to pass it in props as this:-

mixed1.map((cat1) => (<ServicesCategoryOption category1={cat1.categories} setacatid={i=>this.setacatid(i)}/>))

But now I changed setacatid as:-

setacatid(a,b){
    console.log(b);
    this.setState({                     
        catidofclicked:a,
        catnameofclicked:b
    },function(){
        localStorage.setItem('selecteditem',this.state.catidofclicked);
        localStorage.setItem('selectedname',this.state.catnameofclicked);           
    });
}   

So it takes two arguments a and b how to pass it in props now?

Answer 1

You can pass multiple arguments to the event handlers when you are using the arrow function syntax like

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(a, b)=>this.setacatid(a, b)}
      />
))

or you can simply write

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(...args)}
      />
))

which can simply be written as

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={this.setacatid}
      />
))

The only advantage of using the first method is that you can pass custom values too like

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(1, ...args)}
      />
))

in which way you can pass a many parameters from child and receive them in the function without worrying about adding a parameter everytime you want to add a new one

Answer 2

You can do whatever you want:

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={i=>this.setacatid(i,10)}
/>

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={(i, j)=>this.setacatid(i, j)}
/>

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={this.setacatid}
/>