How to send data function in params from child to parent with props – Reactjs

Helleo,
i Need to get a data ({item.type}) from a child component when i click and send it to the parent.
Am passing a props in the click event like this: onClick={clickActionTransfer} i should get the type at this moment and send it to the parent so i can make some operations in handleSlideClick function

my handleSlideClick function here, do some other things nothing to do with this

Child <VerticalCarousel> :

const VerticalCarousel = ({ data, clickActionTransfer }) => {
    <div className="carousel-inner">
        {data.map((item, i) => (
            <button
                type="button"
                onClick={clickActionTransfer}
                })}
                key={i}>
                <span  className="span-theme"></span>
                {item.type}
            </button>
        ))}
    </div>
..
...
..
}

Parent <Slider> :

const Slider = ({ getData, clickAction, children }) => {
  const [dataSlider, setDataSlider] = useState([]);
  const [idLoader, setIdLoader] = useState(clickAction);
        return (
          <div className="slider__container">
            {dataSlider.map((i) => {
              return (
                idLoader === i.id &&
                i.id <= dataSlider.length && (
                  <div key={i.id}>
                    <div
                      style={{
                        transform: `translateX(-${currentIndex * 100}%)`,
                        display: "flex",
                        position: "fixed",
                        transition: "all .5s 1s linear",
                      }}
                    >
                      {" "}
                      {children}{" "}
                    </div>
                    <div
                      className={
                        displayTitleState && i.theme === "dark" ? "dark-theme" : ""
                      }>
                      {dataSlider.map((i, index) => {
                        return <h1 key={index}> {i.title}</h1>;
                      })}
                    </div>
                    <div className="slider__content">
                      <div
                        className={`slider__right ${
                          displayCarouselState ? "showCarousel" : "hideCarousel"
                        } ${i.theme === "dark" ? "dark-theme" : ""}`}
                      >
                        <VerticalCarousel
                          data={i.slider}
                          clickActionTransfer={handleSlideClick}
                        />
                      </div>
                    </div>
                  </div>
                )
              );
            })}
          </div>
        );
    ..
    ...
    .
    }

>Solution :

 onClick={()=>{clickActionTransfer(item.type)}}

Leave a Reply