CODEWITHSUNDEEP
javascriptreactjsreduxreact-bootstrap
matejs
matejs

Reputation: 163

Passing multiple actions to onClick event in a react-bootstrap Button

Consider a react/redux application with react-bootstrap components.

This may be a very rookie question, but I am trying to pass multiple actions to a single onClick event on a Button from a react-bootstrap library.

<Button bsStyle="success" bsSize="small" onClick={someCallback; someOtherCallback;}>
  Something
</Button>

How to do this properly?

Upvotes: 1

Views: 4275

Answers (4)

G6ix
G6ix

Reputation: 138

I had a similar issue with my application (using React JS + Bootstrap 5). I wanted to use onClick to call an API (searchDataRange) and also to render a section of my page (const [renderItems, setRenderItems] = useState(false);)

.

I first tried this (DID NOT WORK!):

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={() => setRenderItems(!renderItems); searchDataRange} </Button>

I tried a few different combos with (), {}, etc.. but this solved the issue(SOLUTION):

  const trigger = () => {
    setRenderItems(!renderItems);
    searchDateRange();
 }

return(

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={trigger}>Search</Button>
             
            </div> ...

Upvotes: 0

Ahmedakhtar11
Ahmedakhtar11

Reputation: 1468

I think there's OnClickCapture as well that works for a secondary Click Event. Probably not the most efficient way, but I think it works in the meantime if you use Onclick for the first function and OnclickCapture for the second function.

Upvotes: -1

solimanware
solimanware

Reputation: 3052

You can use the following code to do more than one thing when the button is fired

function doMagic {
  //do something
  //do another thing
}
<Button bsStyle="success" bsSize="small" onClick="doMagic()">
  Something
</Button>

Upvotes: 0

moonwave99
moonwave99

Reputation: 22812

Wrap them in another function:

<Button bsStyle="success" bsSize="small" onClick={onButtonClick}>
  Something
</Button>
...
onButtonClick = function(event){
  someCallback()
  someOtherCallback()
}

Upvotes: 4

Related Questions