Quiero pasar el valor de isVisibile al componente "Livechat.js" para poder editar dinámicamente alguna información allí de acuerdo con el valor de isVisibile.
Archivo donde está la lógica isVisibile - NewsLetter.js
const NewsLetter = () => { const newsLetterRef = useRef(); const [isVisible , setIsVisible] = useState() useEffect( () => { const observer = new IntersectionObserver( (entries) => { const entry = entries[0]; setIsVisible(entry.isIntersecting) }) observer.observe(newsLetterRef.current) } , []) return ( <> <NewsLetterWrapper> <div ref={newsLetterRef} className={styles.newsLetterCenter}> <div className={styles.newsLetterContainer}> <div> <p className={styles.newsLetterTitle}>Subscribe To Our <br /> <span> Newsletter For 10% - 50% OFF </span> </p> <p className={styles.newsLetterDesc}>Stay up to date with our latest offers and promotions by signing up now! <br /> Be the first to know of our 10% - 50% discounts.</p> </div> <div className={styles.newsLetterInputContent}> <div> <input className={styles.newsLetterInput} type="text" placeholder='Enter email' /> </div> <PrimaryButton> Submit </PrimaryButton> </div> </div> </div> </NewsLetterWrapper> </> ) } export default NewsLetterDonde quiero usar el accesorio - Live.js
const Livechat = (props) => { return ( <> <div className={styles.whatsappFloat}> <div className={styles.chatText}> <p>Chat With Us Now</p> </div> <a href='https://api.whatsapp.com/send?phone=000000000' > <img src={LivechatImg} alt= "/" /> </a> </div> </> ) }Donde uso ambos componentes en una página - Homepage.js
const HomePage = () => { return ( <> <Livechat /> <NewsLetter /> </>Básicamente, lo que quiero hacer es obtener el valor isVisibile de NewsLetter y pasarlo como accesorio al componente Livechat. ¿Alguna idea de cómo se supone que debo lograr esto? Cualquier ayuda sería apreciada, gracias de antemano.
Recomendaría mover isVisible a HomePage, lo que le permitiría pasarlo a ambos componentes. Luego puede actualizar isVisible pasando una función onIsVisibleChange() .
const HomePage = () => { const [isVisible , setIsVisible] = useState() return ( <> <Livechat onIsVisibleChange={setIsVisible}/> <NewsLetter isVisible={isVisible}/> </> }Puedes actualizarlo en NewsLetter:
const NewsLetter = (props) => { const {onIsVisibleChange} = props; const newsLetterRef = useRef(); useEffect( () => { const observer = new IntersectionObserver( (entries) => { const entry = entries[0]; onIsVisibleChange(entry.isIntersecting); }) observer.observe(newsLetterRef.current) } , []) ... }De manera similar, en Livechat puedes usar la variable así:
const Livechat = (props) => { const {isVisible} = props; return ( <> <div className={styles.whatsappFloat}> {isVisible && <div className={styles.chatText}> <p>Chat With Us Now</p> </div> } <a href='https://api.whatsapp.com/send?phone=000000000' > <img src={LivechatImg} alt= "/" /> </a> </div> </> ) }