I am using react with functional component. I also use react-bootstrap , I attached the react-bootstrap carousel , everything is fine with react-bootstrap, for some functionality, I want to get three divs in react , divs has same classes. I know if I use simple html css js then I easily do that,
querySelectorAll(".indicator-btn")
but i want this on react. How can I do that? please suggest me a best practices for that.
This is a my component , in the last i have three divs which i want for Dom.
import React, { useState } from "react"; import Cardcarousel from "./Cardcarousel"; import { Carousel } from "react-bootstrap"; import Brand1img from "../images/brand1.png"; import Airbnbimg from "../images/Airbnb.png"; import Microsoft from "../images/microsoft.png"; import { Row, Col } from "react-bootstrap"; function Carouselx() { const [index, setIndex] = useState(0); const handleSelect = (selectedIndex, e) => { console.log(selectedIndex, "e=>", e); setIndex(selectedIndex); }; const isSlide = (slide) => { console.log("slide no => " + slide); console.log(this); }; return ( <> <div className="px-5 py-3"> <Carousel activeIndex={index} onSelect={handleSelect} onSlide={isSlide}> <Carousel.Item> <Row> <Col> <Cardcarousel name="Technology UI/UX" companylogo={Brand1img} type="Full time job" /> </Col> <Col> <Cardcarousel name="Technology Backend developer" companylogo={Airbnbimg} type="Part time job" /> </Col> <Col> <Cardcarousel name="Technology Backend developer" companylogo={Microsoft} type="Internee" /> </Col> </Row> </Carousel.Item> <Carousel.Item> <Row> <Col> <Cardcarousel name="Technology UI/UX" companylogo={Brand1img} type="Full time job" /> </Col> <Col> <Cardcarousel name="Technology Backend developer" companylogo={Airbnbimg} type="Part time job" /> </Col> <Col> <Cardcarousel name="Technology front end developer" companylogo={Microsoft} type="Internee" /> </Col> </Row> </Carousel.Item> </Carousel> <div className="carusel-indecator-container"> <div className="indicator-btn indicator-btn1"></div> <div className="indicator-btn indicator-btn2"></div> <div className="indicator-btn indicator-btn3"></div> </div> </div> </> ); } export default Carouselx;
Advertisement
Answer
You could use useState
to get its refs (also useRef
but there’ll be a lot more inconveniences potentially).
const [btn1, setBtn1] = useState(); const [btn2, setBtn2] = useState(); const [btn3, setBtn3] = useState(); ... <div ref={setBtn1} className="indicator-btn indicator-btn1"></div> <div ref={setBtn2} className="indicator-btn indicator-btn2"></div> <div ref={setBtn3} className="indicator-btn indicator-btn3"></div>
At some point (after 1st rendering) you’ll have btn1, btn2, btn3 as button elements. If you want to use it, assumingly imperatively, you could useEffect
useEffect(() => { if (!btn1 || !btn2 || !btn3) return; // do something with these refs i.e. make them jquery! $(btn1) }, [btn1, btn2, btn3]);