Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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> :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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)}}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading