React JS need to set multiple state values from dropdown item list

Question

I have a dropdown list from an array of values like mapped to a dropdown and a handleSelect

const handleSelect = (e) => {
     handleShow()
    setCommunityName(e)
}

<DropdownButton id="dropdown-basic-button" title="Join Community" onSelect={handleSelect} hidden={showJoin}>
    {communities.map(data =>
    <Dropdown.Item title={data.CommunityName} key={data.id}
    eventKey={data.CommunityName}>{data.CommunityName}</Dropdown.Item>)}
</DropdownButton>

Right now only data.CommunityName is set in state, but I would also like to set the state of data.id as well. I was trying to do something like this?

const handleSelect = (e, i) => {
    handleShow()
    setCommunityName(e)
    setCommunityId(i)
}

user6749601 · Accepted Answer · 2021-04-21 16:58:59Z

1

What about setting the entire object as value?

<Dropdown.Item title={data.CommunityName} key={data.id}
eventKey={data}>{data.CommunityName}</Dropdown.Item>)}

const handleSelect = (e) => {
    handleShow()
    setCommunityName(e.CommunityName)
    setCommunityId(e.id)
}

answered Apr 21, 2021 at 16:58

user6749601

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

2 Comments

AjackX Over a year ago

I tried printing the values and I get undefined when calling handleSelect

AjackX Over a year ago

I just ended up passing the id since that it what was needed for the API call. That method just passed an object and I was unable to access the values. I was probably missing

Collectives™ on Stack Overflow

React JS need to set multiple state values from dropdown item list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related