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.

Answer 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.