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.