ParallaxController.update() Throwing Error

[xander-adkins]

Hello @jscottsmith. Parallax Component and Listener are super cool. The component works generally, except image loading is messing up the parallax calculations, and I am having issues getting the controller to update. Any way I try to call the update() method throws an error. Any help sorting this out would be really appreciated.

Here is my code:

`
import React, {Component} from 'react'
import { Parallax, ParallaxController } from 'react-scroll-parallax';
import styled from 'styled-components'
import media from '../components/mediaquery.jsx'

const City = styled.section margin: 5em 0; width: 100%;

const TextWrap = styled.div display: flex; flex-flow: row wrap; justify-content: space-between; margin: 5em 0; ${media.to.smmargin: 2em 0;`}

h2 {
width: 45%;
${media.to.xl width: 45%;}
${media.to.lg width: 100%;}
${media.to.md width: 100%;}
${media.to.sm width: 100%;}
}

p {
width: 45%;
${media.to.xl width: 45%;}
${media.to.lg width: 100%;}
${media.to.md width: 100%;}
${media.to.sm width: 100%;}
}
`

const ImageWrap = styled.section display: flex; flex-flow: row wrap; justify-content: space-between; margin: 5em 0; padding: 0; ${media.to.smmargin: 2em 0;`}

.city-image:nth-child(even) {
margin: 2em 5%;
width: 35%;
}

.city-image:nth-child(odd) {
margin: 2em 5%;
width: 35%;
}

img {
height: 100%;
width: 100%;
}
`

class CityComponent extends Component {

componentWillMount(){
ParallaxController.init()
}

componentDidMount() {
ParallaxController.update() // THIS IS WHAT THROWS THE ERROR
}

render() {
const Gallery = this.props.gallery.map((image, index) => {
let keyValue = ${this.props.name.toLowerCase()} + '_' + ${index}

  if ( index % 2 === 0 && index !== 0 ) {
    return (
      <Parallax
          className="city-image"
          offsetYMax={'60%'}
          offsetYMin={'0%'}
          slowerScrollRate
          tag="figure"
          key={keyValue}
      >
          <img src={this.props.gallery[index]} alt={this.props.name} />
      </Parallax>
    )
  } else if ( index !== 0 ) {
    return (
      <Parallax
          className="city-image"
          offsetYMax={'30%'}
          offsetYMin={'0%'}
          slowerScrollRate
          tag="figure"
          key={keyValue}
      >
          <img src={this.props.gallery[index]} alt={this.props.name} />
      </Parallax>
    )
  }
})
return (
  <City>
    <TextWrap>
      <h2>{this.props.name}</h2>
      <p>{this.props.text}</p>
    </TextWrap>
    <ImageWrap>
      <img src={this.props.gallery[0]} alt={this.props.name} />
      {Gallery}
    </ImageWrap>
  </City>
)

}
}

export default CityComponent
`

[jscottsmith]

@xander-adkins After calling ParallaxController.init() the controller creates the ParallaxController global on the window. So calling window.ParallaxController.update() will avoid the error in this case.

Although this highlights a bigger issue of confusing naming I should've foreseen. In my use cases I always called init() in a top level component like the root of the app so I overlooked this. I'd still suggest moving the init method call from componentWillMount to the root of your app like this example.

I'll update the readme to clarify this is a global and consider renaming things to avoid this confusion.

[xander-adkins]

Good catch @jscottsmith , what you've explained makes perfect sense. Both suggestions you've described have resolved the error. Thanks for your quick and thorough turnaround on this!

10/10 would do again.