CODEWITHSUNDEEP
javascripthtmlreactjsbuttondom-events
user1121210
user1121210

Reputation: 83

How to handle click on specific button in loop?

I have created following design:

enter image description here

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

button click expanding all boxes

Can someone help me to correct the code ?

Upvotes: 0

Views: 674

Answers (3)

Ansh Saini
Ansh Saini

Reputation: 415

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>
  )
)}

Upvotes: 1

DHRUV GUPTA
DHRUV GUPTA

Reputation: 2091

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

Upvotes: 0

Rahul Shah
Rahul Shah

Reputation: 2023

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 ""} }

Upvotes: 0

Related Questions