React array item selection

Question

I am trying to click on one card of a dynamically created list using map(). I want to click on one card from the array and add a class to it, while at the same time deselecting the other card that was previously clicked. How can I accomplish this? This is what I have so far:

const CardList = () => {
  return (
    <div className='card-list'>
      {CardData.map(({ id, ...otherData }) => (
        <Card key={id} {...otherData} />
      ))}
    </div>
  );
};

export default CardList;

const Card = ({
  headline,
  time,
  views,
  thumbImg,
  trainerImg,
  workouts,
  id
}) => {
  const [isSelected, setIsSelected] = useState(false);
  const [clickId, setClickId] = useState('');

  function handleClick(id) {
    setIsSelected(!isSelected);
    setClickId(id);
  }

  return (
    <div
      className={`card ${isSelected && clickId === id ? 'clicked' : ''}`}
      onClick={() => handleClick(id)}
    >
      <div className='thumbnail-div'>
        <img className='thumbnail-img' src={thumbImg} alt='video' />
        {workouts ? (
          <div className='workout-overlay'>
            <p>{workouts}</p>
            <p className='workouts'>workouts</p>
          </div>
        ) : null}
      </div>

      <div className='card-info'>
        <div className='card-headline'>
          <p>{headline}</p>
          <img src={trainerImg} alt='trainer' />
        </div>
        {time && views ? (
          <div className='trainer-data'>
            <span>
              <i className='glyphicon glyphicon-time'></i>
              {time}
            </span>
            <span>
              <i className='glyphicon glyphicon-eye-open'></i>
              {views}
            </span>
          </div>
        ) : null}
      </div>
    </div>
  );
};

export default Card;

also include snippet of where you are using Card. I mean the map function. — timbersaw
– timbersaw, Commented Feb 26, 2021 at 16:58

lissettdm · Accepted Answer · 2021-02-26 17:41:17Z

1

The parent component should control what card is clicked. Add className property to card component:

const Card = ({
    //...
    className,
    onClick    
}) => {
     //...    
     return (
        <div
         className={`card ${className}`}
         onClick={() => onClick(id)}
       >...</div>
    ) 
}

In parent component pass the className 'clicked' and add the onClick callback to set the selected card:

const CardList = () => {
  const [isSelected, setIsSelected] = useState(null);
  
  const handleClick = (id) => {
    setIsSelected(id);
  }
  
  return (
    <div className='card-list'>
      {CardData.map(({ id, ...otherData }) => (
        <Card key={id} className={isSelected===id && 'clicked'} onClick ={handleClick} {...otherData} />
      ))}
    </div>
  );
};

answered Feb 26, 2021 at 17:41

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

1 Comment

stevejd88 Over a year ago

Sweet this worked. In you code for the child component I added onClick={() => onClick(id)}. Instead of onClick={() => handleClick(id)}.

timbersaw · Accepted Answer · 2021-02-26 17:13:19Z

0

You can do something like this.

First you don't have to set state to each card. Instead Lift state Up.

You define which card is selected in parent so you can pass that to children and add classes if current selected is matching that children.


const CardList = () => {

const [isSelected, setIsSelected] = useState();

const handleCardClick = (id) => {
   setIsSelected(id);
 }

 return (
   <div className='card-list'>
     {CardData.map(({ id, ...otherData }) => (
       <Card key={id} {...otherData} handleClick={handleCardClick} isSelected={isSelected}/>
     ))}
   </div>
 );
};

export default CardList;

const Card = ({
  headline,
  time,
  views,
  thumbImg,
  trainerImg,
  workouts,
  id,
  isSelected,
  handleClick
}) => {

  return (
    <div
      className={`card ${isSelected === id ? 'clicked' : ''}`}
      onClick={() => handleClick(id)}
    >
      <div className='thumbnail-div'>
        <img className='thumbnail-img' src={thumbImg} alt='video' />
        {workouts ? (
          <div className='workout-overlay'>
            <p>{workouts}</p>
            <p className='workouts'>workouts</p>
          </div>
        ) : null}
      </div>

      <div className='card-info'>
        <div className='card-headline'>
          <p>{headline}</p>
          <img src={trainerImg} alt='trainer' />
        </div>
        {time && views ? (
          <div className='trainer-data'>
            <span>
              <i className='glyphicon glyphicon-time'></i>
              {time}
            </span>
            <span>
              <i className='glyphicon glyphicon-eye-open'></i>
              {views}
            </span>
          </div>
        ) : null}
      </div>
    </div>
  );
};

export default Card;

answered Feb 26, 2021 at 17:13

timbersaw

6685 silver badges12 bronze badges

2 Comments

stevejd88 Over a year ago

When I do this it adds the 'clicked' class to all the items in the array.

stevejd88 Over a year ago

Did you mean to set isSelected={isSelected} instead of isSelected{id}. I tried this and then set useState(''') to an empty string. When I do this it adds the class to all items when I click on one.

Collectives™ on Stack Overflow

React array item selection

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related