In mapped data how to switch specific button without affecting rest buttons-CodePudding

I have an api which return me list of users in an array with keys like - userID, userName, profileImage.

const [UserLists, setUserLists] = useState([]) //for user data list store

I stored that array in above mentioned state which I'm gonna map ahead.

{UserLists !== undefined && UserLists.length > 0 ?
                                <Card className='mt-2' style={{ height: '45vh', overflow: 'auto', boxShadow: 'none' }} >
                                    {UserLists.map((obj, index) => { 
                                        return (<Card className='mt-4' key={index}>
                                            <div className='row cursor'>
                                                <div className='col-1'>
                                                    <Avatar src={obj.UserProfileImage !== null ? obj.UserProfileImage: <AssignmentIndOutlined />} alt="userProfile" style={{ height: '40px', width: '40px' }} />
                                                </div>
                                                <div className='col-8'>
                                                    <Typography variant='h6'>{obj.userName}</Typography>
                                                </div>
                                                <div className='col-3'>
                                                      <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID)}>Invite</button>
                                                </div>
                                            </div>
                                        </Card>)
                                    })}
                                </Card> : <div className='grid place-items-center h-screen'> <CircularProgress aria-label="Loading..." /> </div>
                            }

I want to switch Invite button into remove button once click on it but it should only swithc with specific button on which I click, instead it replacing all button or nothing happends.

I tried using boolean state call switchButton and default value for this state set as FALSE.

on button click function -

const handleInviteUser = (penName, UserID, obj) => {
       setswitchButton(true)  // to switch Invite button into remove
}

and added ternary operator on button -

{switchButton ? <button className='primary-border-button float-right w-50' onClick={() => handleRemoveInvitedUser(obj.UserID)}>Remove</button> : <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID, obj)}>Invite</button>}

it switch all invite button into remove button.

CodePudding user response：

The problem is switchButton is not specific to each user being mapped so you'll switch between Invite and Remove for each button when setting its state.

An easier way to handle this would be to have a boolean property on your user object to check if that specific user is invited or not, so your object would contain the following properties:

userId
userName
profileImage
userInvited

And you would handle that in your onClick and ternary like this:

const handleInviteUser = (obj) => {
   obj.userInvited = !userInvited; // Set userInvited property to true/false based on initial value
}

{obj.userInvited ? <button className='primary-border-button float-right w-50' onClick={() => handleInviteUser(obj)}>Remove</button> : <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj)}>Invite</button>}

CodePudding user response：

I figured out what I'm missing in my code to achieve the expected result.

Here is solution - because I'm getting userList from an api so I don't want make any changes directly in response but I'm gonna make changes in the state where I'm storing the list UserLists

All I have do is on Invite button click, filter the userID in UserLists and add an object in it.

const handleInviteUser = (penName, UserID) => {
        UserLists.filter(o => {  //for switch invite button to remove
            if (parseInt(o.UserID) === parseInt(UserID)) {
                return o.isInvited = true
            }
        })
    }


const handleRemoveInvitedUser = (userID) => {
         UserLists.filter(o => { //for switch remove button to invite
            if (parseInt(o.UserID) === parseInt(userID)) {
                return o.isInvited = false
            }
        })
    }
 

{obj.isInvited !== undefined && obj.isInvited === true ? <button className='primary-border-button float-right w-50' onClick={() => handleRemoveInvitedUser(obj.UserID)}>Remove</button> : <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID, obj)}>Invite</button>}