How to access elements of other component in Reactjs?-CodePudding

I have two components Playlist and Vol-Slider,I want to access vol-Slider component inside Playlist component the thing I wanna do is whenever someone clicks on icons a class should be added to the vol-slider component as well.

Playlist Component

export default function Playlist() {
  function toggleClass(e) {
    e.currentTarget.classList.toggle("active");
  }

  return (
    <div id="playlist-container">
      <div id="playlist">
        <div className="icons" onClick={toggleClass}>
          <BsCloudRain />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <GiForest />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <MdOutlineWaterDrop />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <BiWind />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <GiCampfire />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <GiThreeLeaves />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <BsMoonStars />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <BiWater />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <BiTrain />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <BiCoffeeTogo />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <FaFan />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <DiDigitalOcean />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <GiWaterfall />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <FaPlane />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <IoIosPlanet />
          <VolSlider />
        </div>
        <div className="icons" onClick={toggleClass}>
          <GiOctopus />
          <VolSlider />
        </div>
      </div>
    </div>
  );
}

Volume Slider Component

export default function volSlider() {
  return (
    <div id="vol-slider-div">
      <input className="vol-slider" type="range" min="0" max="100" step="1" />
    </div>
  );
}

CodePudding user response：

In React, instead of using toggle, you can use states to handle UI updates. With this approach, you can pass states to any components for conditional renderings.

Playlist

//reduce your code duplication, and re-use `isActive` state for each icon
function PlaylistItem({ children }) {
   const [isActive, setIsActive] = useState(false)

   function toggleClass() {
      setIsActive(!isActive) //toggle active value
   }

   return (<div className={`icons ${isActive && "active"}`} onClick={toggleClass}>
          {children}
          <VolSlider isActive={isActive}/>
   </div>)
}

export default function Playlist() {

  return (
    <div id="playlist-container">
      <div id="playlist">
        <PlaylistItem>
          <BsCloudRain />
        </PlaylistItem>
        <PlaylistItem>
          <GiForest />
        </PlaylistItem>
        <PlaylistItem>
          <VolSlider />
        </PlaylistItem>
        <PlaylistItem>
          <BiWind />
        </PlaylistItem>
        <PlaylistItem>
          <GiCampfire />
        </PlaylistItem>
        <PlaylistItem>
          <GiThreeLeaves />
        </PlaylistItem>
        <PlaylistItem>
          <BsMoonStars />
        </PlaylistItem>
        <PlaylistItem>
          <BiWater />
        </PlaylistItem>
        <PlaylistItem>
          <BiTrain />
        </PlaylistItem>
        <PlaylistItem>
          <BiCoffeeTogo />
        </PlaylistItem>
        <PlaylistItem>
          <FaFan />
        </PlaylistItem>
        <PlaylistItem>
          <DiDigitalOcean />
        </PlaylistItem>
        <PlaylistItem>
          <GiWaterfall />
        </PlaylistItem>
        <PlaylistItem>
          <FaPlane />
        </PlaylistItem>
        <PlaylistItem>
          <IoIosPlanet />
        </PlaylistItem>
        <PlaylistItem>
          <GiOctopus />
        </PlaylistItem>
      </div>
    </div>
  );
}

VolSlider

//pass props `isActive` for class update according to state changes from `PlaylistItem`
export default function volSlider({ isActive }) {
  return (
    <div id="vol-slider-div" onClick={(e) => e.stopPropagation()}>
      <input className={`vol-slider ${isActive && "active"}`} type="range" min="0" max="100" step="1" />
    </div>
  );
}

CodePudding user response：

Karan.

I would recommend storing a state of whether the class is toggled on or off in your playlist component. You can do this like so:

const [isClassToggled, setIsClassToggled] = useState(false);

Then, I would suggest passing this state as a prop into your VolSlider component. You can do this like so:

<VolSlider classToggled={isClassToggled} />

Then in your VolSlider component, you would apply a class if this prop is true. This can be done like so:

export default function volSlider() {
  return (
    <div id="vol-slider-div">
      <input className={`vol-slider ${props.classToggled ? "classToShowWhenToggled" : "ClassToShowWhenNotToggled" }`} type="range" min="0" max="100" step="1" />
    </div>
  );
}

This makes use of an experession to test the value of a variable and display a different value based on true or false using ? and : . The same logic can be replicated to apply classes in the Playlist component but you would do isClassToggled rather than props.classToggled.

Hope this helps!