Issue when changing state of one of my children component - GSAP target null not found.

[maxvia]

Hi guys,

 

I am having this weird issue when I try to change the state of my children component. 

 

import React, {useEffect, useRef, useState} from "react"
import SEO from "../components/seo"
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

//Homepage components 
import Navbar from '../components/share/Navbar'
import Banner from '../components/homepage/Banner'
import IntroductionText from '../components/homepage/introduction/IntroductionText'
import IntroductionSlider from '../components/homepage/introduction/IntroductionSlider'
import HorizontalCarousel from '../components/homepage/HorizontalCarousel'
import Rooms from '../components/homepage/rooms/Rooms'
import Activities from '../components/homepage/activities/Activities'
import Spa from '../components/homepage/spa/spa'
import Instagram from '../components/homepage/instagram/InstagramGallery'




const IndexPage = () => {

  let roomsContainer = useRef(null)
  let spaContainer = useRef(null)
  let mainContainer = useRef(null)
  let navbar = useRef(null)

  const [showNavbar, setShowNavbar] =  useState(false)

  useEffect( () => {

    gsap.registerPlugin(ScrollTrigger)   
    
    // navbar
    ScrollTrigger.create({
      start:"100px",
      end: "bottom bottom",
      markers: true, 
      onEnter: () => {
        setShowNavbar(true)
        console.log('hey')
      },  
      onLeaveBack: () => {
        setShowNavbar(false)
        console.log('hey')
      },
    })
  })

    return (
      <div 
        ref={el => mainContainer = el}
        style={{backgroundColor: 'white', position: 'relative', height: '100%'}}
      >
        <SEO title="Home" />
        <Navbar showNavbar={showNavbar} />
        <Banner/>
        <IntroductionText />
        <IntroductionSlider />
        <HorizontalCarousel />
        <div 
          ref={el => roomsContainer = el}>
          <Rooms /> 
        </div>
        <div
          ref={el => spaContainer = el}>
          <Spa />
          ehll
        </div>
        <Activities />
        <section className='insta'>
          <Instagram />
        </section>
        <div>This is last</div>
      </div>
    )
  }

export default IndexPage

I have created a <Navbar /> component that receive a state change after scrolling down a 100px. This is working well, my Navbar receive the state change and update accordingly (background color change using gsap) HOWEVER after scrolling down for a little bit (arround the middle of my app) I get the following error 'GSAP target null not found.' which is causing an issue to my <Instagram /> component who also has gsap in it. It doesnt work anymore even though it usually works really well.

 

The weirdest part is that when I dont apply a state change in my onEnter and onLeaveBack fonctions but just console.log('hey') i do not have 'GSAP target null not found.' showing in my console and my Instagram component works well. Any idea where this is coming from ? May be another way with gsap to have my Navbar component update after scrolling down a 100px?

 

Thank you for your help!

[Rodrigo]

Hey,

 

First, you have the same issue as in your other post. Your useEffect() hook doesn't have a dependencies array passed to it, so when you update the showNavbar state value, the entire useEffect hook runs again, that's why when you don't upate the state in the ScrollTrigger callbacks nothing goes wrong. Pass an empty array and see if it works.

 

Second, free React advice. Is there any need to have the logic to show/hide the navbar component in it's parent component? Normally is better to keep that inside the component itself, with that your code becomes a bit unpredictable and harder to reason about. Manage as little state as possible from child components in their parents, try to manage the state of components inside each component, it's easier to debug, maintain and test.

 

Third, If I was you I'd try using layouts for an easier developer experience:

https://www.gatsbyjs.com/docs/layout-components/

https://www.gatsbyjs.com/docs/recipes/pages-layouts/

 

Finally, I'd recommend you to take a course on React and Gatsby or check in youtube for something that is up-to-date, since you're kind of missing some basic stuff when it comes to use both frameworks. Here is a couple of them in FreeCodeCamp's youtube channel:

 

React (very up-to-date): https://www.youtube.com/watch?v=4UZrsTqkcW4&ab_channel=freeCodeCamp.orgGats

 

Gatsby (a list you can check up with the latest ones): https://www.youtube.com/results?search_query=gatsby&sp=EgIIBQ%3D%3D

 

Happy Tweening!!!

[maxvia]

Thank you very much @Rodrigo for your time and replies. I do need to review some of react basics... will definitely check out the link you send me !