How to handle click on specific button in loop?

Question

I have created following design:

Here is the react js code:

 {this.props.BetSlipDataObj.betDetails.data.map(
                (value, index) => {
                <div className="d-flex justify-content-end">
                          <button
                            className="info-button"
                            data-toggle="collapse"
                            href="#collapseExample"
                            role="button"
                            aria-expanded="false"
                            aria-controls="collapseExample"
                            // onClick={
                            //   value.betId != null
                            //     ? _this.getBetIdDetails(value.betId)
                            //     : value.childId != null
                            //     ? _this.getBetIdDetails(value.childId)
                            //     : ""
                            // }
                          >
                       </div>
                       })}

Here I am trying following task If I click on one button it should expand the box But if I click on one button all boxes are expanding. If I call some method on click its getting called infinitely

Can someone help me to correct the code ?

Ansh Saini · Accepted Answer · 2021-02-25 08:29:34Z

1

You can call a function on button click. I think it was calling infinitely because you were not passing a reference to the function.

{this.props.BetSlipDataObj.betDetails.data.map(
  (value, index) => (
    <div className="d-flex justify-content-end" key={index}>
      <button
        className="info-button"
        data-toggle="collapse"
        href="#collapseExample"
        role="button"
        aria-expanded="false"
        aria-controls="collapseExample"
        onClick={
          value.betId != null
            ? () => _this.getBetIdDetails(value.betId)
            : value.childId != null
            ? () => _this.getBetIdDetails(value.childId)
            : () => {}
        }
      >
    </div>
  )
)}

You were also missing the key prop on div

EDIT: One button is opening all the boxes because they all have the same IDs and controls. To make the IDs and controls unique, you can do something like this:

{this.props.BetSlipDataObj.betDetails.data.map(
  (value, index) => (
    <div className="d-flex justify-content-end" key={index}>
      <button
        className="info-button"
        data-toggle={`collapse${index}`}
        href={`#collapseExample${index}`}
        role="button"
        aria-expanded="false"
        aria-controls={`collapseExample${index}`}
        onClick={
          value.betId != null
            ? () => _this.getBetIdDetails(value.betId)
            : value.childId != null
            ? () => _this.getBetIdDetails(value.childId)
            : () => {}
        }
      >
    </div>
  )
)}

edited Feb 25, 2021 at 8:29

answered Feb 25, 2021 at 5:50

Ansh Saini

4153 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1121210 Over a year ago

Thank you Ansh . Now there are no infinite calls but still on click on one button all other boxes also expanding. Can you please share what is wrong ? I think part needs modification

data-toggle="collapse"         href="#collapseExample"         role="button"         aria-expanded="false"         aria-controls="collapseExample"

I tried use index but it is not working.

Ansh Saini Over a year ago

I have updated the answer, maybe that will solve your purpose.

Rahul Shah · Accepted Answer · 2021-02-25 05:46:30Z

0

The solution seems pretty straightforward. You're directly executing a function in the onClick. That's why all of them are getting executed. You just need to change the onClick as follows:

onClick = { ()  => {
    if(value.betId != null){
     _this.getBetIdDetails(value.betId)
} else if (value.childId != null){
     _this.getBetIdDetails(value.childId)
} else {return ""} }

answered Feb 25, 2021 at 5:46

Rahul Shah

2,0932 gold badges8 silver badges7 bronze badges

Comments

DHRUV GUPTA · Accepted Answer · 2021-02-25 05:50:49Z

0

To each div you need to give unique id, may be primary key of that row, and when that button is clicked pass the id to the opening function, and append that to id of that div to open. Hope it helps. This will go like this:-

  onclick=handler(1)

div id should be like this:- open1, open2 handler should be like this:-

handler(id) => idofelement+id open

answered Feb 25, 2021 at 5:50

DHRUV GUPTA

2,1111 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to handle click on specific button in loop?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related