React: Moving component to different div on click
Solution 1:
Moving cards
To move a card to a different list you need a new state array that will represent "the members of the team". Something like:
const [team, setTeam] = useState([]);
Render the items in team
inside the "teamComp" <div>
, the same way you do it in the agent container.
Then add the new function prop to the card and use it in the onClick
handler in the card <div>
:
<AgentCard
key={agentDetails[0]}
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
handleClick={moveToTeam}
/>
...
<div className="card-container" onClick={() => handleClick(name)}>
and in this function, add the agentDetails
item to the team
state and remove it from the agentDetails
state. Make sure that you supply new arrays when setting state:
const moveToTeam = (name) => {
const newTeam = [...team, agentDetails.find((agent) => agent[0] === name)];
const newAgentDetails = agentDetails.filter((agent) => agent[0] !== name);
setTeam(newTeam);
setAgentDetails(newAgentDetails);
};
Filtering
For filtering you need another state that contains all selected options:
const [options, setOptions] = useState(allOptions);
where allOptions
is an array of all available options, and it should not change.
Add the onChange
handler to the <Select>
component:
<Select
options={allOptions}
onChange={(selectedOptions) => setOptions(selectedOptions)}
defaultValue={allOptions}
isMulti
/>
and finally use options
to filter cards:
<div id="agent_container" className="agent-container">
{agentDetails
.filter(
(agentDetails) =>
options.filter((option) => option.label === agentDetails[1][1])
.length > 0
)
.map((agentDetails) => (
<AgentCard
key={agentDetails[0]}
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
handleClick={moveToTeam}
/>
))}
</div>
You can see the complete example on codesandbox.
I left most of the names in place, although I think using agentDetails
for different things is confusing. The data structures can also be improved, but I left them unchanged as well.