reactjs toggle enable/disable button inside map function

Question

I have a map function which spins up two buttons A and D.

My problem is I am trying to toggle the active state for A and D. Since its inside a loop, if I change the status for one row, it impacts other rows too. What is the cleanest way to achieve tis.

 {props.fileNamesStatus.map((file) => {

                                return <li>
                                    <div class="btn-group">
                                        <input type="button" className="btn btn-secondary" value={file.fileName}></input>
                                        <input type="button" value="A" className={`btnA ${file.fileStatus === 'A' ? 'btnDisable' : ''}`} onClick={handleChangeFileStatus}></input>
                                        <input type="button" value="D" className={`btnD ${file.fileStatus === 'D' ? 'btnDisable' : ''}`} onClick={handleChangeFileStatus}></input>
                                    </div>
                                </li>
                            })}

My problem is I want to toggle between button A and D. So when I click on A, D should be active and when I click on D, A should be active.

Shri Hari L · Accepted Answer · 2020-10-27 20:48:37Z

1

I think I could give you an idea. Try something like this,

<input type="button" value="A" className="btnA" disabled={file.fileStatus === 'A'} onClick={handleChangeFileStatus}>
</input>
<input type="button" value="D" className="btnD" disabled={file.fileStatus === 'B'} onClick={handleChangeFileStatus}></input>

Hope that suits your case.

answered Oct 27, 2020 at 20:48

Shri Hari L

4,9732 gold badges8 silver badges22 bronze badges

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

3 Comments

Thales Kenne Over a year ago

I think Shri Hari is correct. You actually had the answer yourself when toggling the classes using the ternary operator to switch which one is active. All you need to do is apply the same logic to the disabled prop for the input.

user2281858 Over a year ago

@Shr Hari, just wanted to add, can i toggle classnames instead if disabled. This way I can add more styles. Can I use useState and do it?

user2281858 Over a year ago

Also it wont toggle, the way you did it. It needs to go in some state.

Collectives™ on Stack Overflow

reactjs toggle enable/disable button inside map function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related