REACT.JS how to detect only one of the cards is clicked from a component-CodePudding

I tried to add click handler on my code, the idea is when i click on my first card, the first card add new class "selected" nad when i click on my third card or else the third card or else will add new class "selected". There is a problem when i was clicking on any card it was always first card was selected. Please help me. Thank you.

Parent code

import React, { useState } from 'react';

import CardBus from '../CardBus/CardBus.component';

import './BusSelector.style.css'

function BusSelector() {
  const [buses, setBuses] = useState([
    {
      busNumber: 1,
      destination: 'Cibiru - Cicaheum',
      stopTime: '09:20 - 09.45',
      stopLocation: 'Jl.Jendral Sudirman',
      isSelected: false
    },
    {
      busNumber: 2,
      destination: 'Cicaheum - Cibereum',
      stopTime: '09:10 - 09.20',
      stopLocation: 'Jl.Soekarno Hatta',
      isSelected: false
    },
  ]);

  return (
    <div className="bus-selector--container">
      {buses.map((bus) => {
        return <CardBus key={bus.busNumber} eachBus={bus} buses={buses} setBuses={setBuses} />
      })}
    </div>
  );
}

export default BusSelector;

Child code:

import React from 'react';

import './CardBus.style.css';

import TimeProgressThin from '../../icon/Time_progress_thin.svg';
import PinLight from '../../icon/Pin_light_thin.svg';

function CardBus(props) {
  const [isSelected, setIsSelected] = useState(false)
  let { eachBus, buses, setBuses} = props;

const selectedHandler = () => {
    if (isSelected) {
      const card = document.querySelector('.card');
      card.classList.add('selected');
      return setIsSelected(!isSelected);
    }
    else {
      const card = document.querySelector('.card');
      card.classList.remove('selected');
      return setIsSelected(!isSelected);
    }
  } 

  return (
    <div key={eachBus.key} className="card" onClick={selectedHandler}>
      <div className="bus--left">
        <h1>{eachBus.busNumber}</h1>
      </div>
      <div className="bus--right">
        <div className="title">
          <h1>{`Armada ${eachBus.busNumber}`}</h1>
          <h2>{eachBus.destination}</h2>
        </div>

        <div className="detail">
          <div className="detail--item">
            <div>
              <img src={TimeProgressThin} alt="Time Progress Logo" />
            </div>
            <div className="detail_content">
              <h3>Last stopped</h3>
              <h3>{eachBus.stopTime}</h3>
            </div>
          </div>
          <div className="detail--item">
            <div>
              <img src={PinLight} alt="Pin Light Logo" />
            </div>
            <div className="detail_content">
              <h3>Location Stopped</h3>
              <h3>{eachBus.stopLocation}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CardBus;

CodePudding user response：

You can handle this with reactjs

child code

import React from 'react';

import './CardBus.style.css';

import TimeProgressThin from '../../icon/Time_progress_thin.svg';
import PinLight from '../../icon/Pin_light_thin.svg';

function CardBus(props) {
  const [isSelected, setIsSelected] = useState(false);
  let { eachBus, buses, setBuses} = props;

  React.useEffect(() =>  {
     setIsSelected(eachBus.isSelected);
  }, [props]);

  const selectedHandler = () => {       
    let item = buses.find(bus=> bus.busNumber === eachBus.busNumber);

    let index = buses.findIndex(bus=> bus.busNumber === eachBus.busNumber);

    item.isSelected = !item.isSelected;

    let newData = buses;

    newData[index] = item;

    setBuses(newData);
  } 

  return (
    <div key={eachBus.key} className={`card ${isSelected ? "selected" : ""}`} onClick={selectedHandler}>
      <div className="bus--left">
        <h1>{eachBus.busNumber}</h1>
      </div>
      <div className="bus--right">
        <div className="title">
          <h1>{`Armada ${eachBus.busNumber}`}</h1>
          <h2>{eachBus.destination}</h2>
        </div>

        <div className="detail">
          <div className="detail--item">
            <div>
              <img src={TimeProgressThin} alt="Time Progress Logo" />
            </div>
            <div className="detail_content">
              <h3>Last stopped</h3>
              <h3>{eachBus.stopTime}</h3>
            </div>
          </div>
          <div className="detail--item">
            <div>
              <img src={PinLight} alt="Pin Light Logo" />
            </div>
            <div className="detail_content">
              <h3>Location Stopped</h3>
              <h3>{eachBus.stopLocation}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CardBus;

CodePudding user response：

Allow multiple selections

function CardBus(props) {
  const [isSelected, setIsSelected] = useState(false);
  let { eachBus, buses, setBuses } = props;

  return (
    <div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={() => setIsSelected(!isSelected)}>
...
    </div>
  );
}

export default CardBus;

Allow single select

You can simplify the code a lot if you move the selected child logic to the parent.

Parent code:

function BusSelector() {
  const [buses, setBuses] = useState([
    {
      busNumber: 1,
      destination: 'Cibiru - Cicaheum',
      stopTime: '09:20 - 09.45',
      stopLocation: 'Jl.Jendral Sudirman',
      isSelected: false
    },
    {
      busNumber: 2,
      destination: 'Cicaheum - Cibereum',
      stopTime: '09:10 - 09.20',
      stopLocation: 'Jl.Soekarno Hatta',
      isSelected: false
    },
  ]);

  const [selectedBus, setSelectedBus] = useState(-1);

  return (
    <div className="bus-selector--container">
      {buses.map((bus) => {
        return <CardBus
          key={bus.busNumber}
          eachBus={bus}
          buses={buses}
          setBuses={setBuses}
          onClick={() => setSelectedBus(bus.busNumber)}
          isSelected={bus.busNumber === selectedBus} />;
      })}
    </div>
  );
}

export default BusSelector;

Child code:

function CardBus(props) {
  let { eachBus, isSelected, buses, setBuses, onClick } = props;

  return (
    <div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={onClick}>
    ...
    </div>
  );
}

export default CardBus;