0

im trying to create a react page with react-spring's parallax.Im using web api for data so when i use parallax tags im trying to set offset and scrollTo function's value.As you can see below;

class HomeComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        list: [],
        categoryCount: '',
    }

}
   componentDidMount() {
    axios.get(`http://localhost:9091/api/category`)
        .then(res => {
            this.setState({ list: res.data, categoryCount: res.data.length })
        });
}

so these are my declerations and web api call part, next part is render();

render() { let i = 1 return <Parallax pages={this.state.categoryCount + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}> <ParallaxLayer key={0} offset={0} speed={0.5}> <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE</span> </ParallaxLayer> {this.state.liste.map((category) => { return ( <ParallaxLayer key={category.categoryId} offset={i} speed={0.5}> <span onClick={() => { this.parallax.scrollTo(i + 1) }}>{category.categoryName}</span> {i += 1} {console.log(i)} </ParallaxLayer> ); })} </Parallax> }

so in a part of this code, i am mapping the list for creating enough amount of parallax layer.But I can't manage the offset and this.parallax.scroll() 's values.These guys taking integer value for navigation to each other.

I tried the i and i+1 deal but it gets weird.First parallax works well it navigates the second page but after first page every page navigates me to the last page.I can't find a related question in stackoverflow so i need help on this one.Thanks for answers and sorry for my English.

Kadir Akın
  • 43
  • 1
  • 7
  • One thing I'm curious about is the second setState call in componentDidMount. Is "categoryCount" getting the value you want? Due to the asynchronous nature, I'd assume the second setState should be inside the "then", so that it can get the list's length after the list has been filled with "res.data" for sure. – saglamcem Dec 08 '19 at 20:55
  • Also, what do you mean exactly by "i and i+1 deal"? Is it giving an index to each "category" (this.state.list.map((category, index) => {}) and then using that "index" as a parameter to scrollTo (this.parallax.scrollTo(index+1))? – saglamcem Dec 08 '19 at 21:05
  • @saglamcem yes, you are right about "categoryCount".I noticed that later but i forgot to delete that."the i and i+1 deal" is setting the state +1 value after offset line but that didn't work either because of async nature i guess. – Kadir Akın Dec 08 '19 at 21:32
  • Increasing the offset shouldn't be a problem (async-wise), unless you're making a call to the backend and are expecting a result. :) theoretically (and looking at the api: https://www.react-spring.io/docs/props/parallax) I'd expect the i and i+1 thing to work. Maybe you can play around with this working project and see what you could be doing wrong: https://codesandbox.io/s/nwq4j1j6lm?from-embed – saglamcem Dec 08 '19 at 21:40
  • @saglamcem Hey, i made a change in the entry.Can you check it again? – Kadir Akın Dec 08 '19 at 22:26
  • this.state.liste should be "list" I guess :) the reason every page after the first one navigates to the last one is probably because the "i" variable is increased for every item in the list, and only after the iterations it's binded to the scrollTo value. This is just a guess; but my assumption is that the problem lies in how the "i" value is set, and how "this" is binded. If you can create a stackblitz/repl.it or something, I can investigate further and help you find the issue. Without debugging it's a bit harder :) – saglamcem Dec 08 '19 at 22:35
  • https://stackblitz.com/edit/react-8krj7u you can also check this quick stackblitz I added, to show how to add the loop index with the map (very simple example, doesn't include parallax or anything). – saglamcem Dec 08 '19 at 22:47
  • @saglamcem https://stackblitz.com/edit/react-v9wqca here, i created the stackblitz repo.I will look your example now.Thanks for the effort. – Kadir Akın Dec 08 '19 at 22:58
  • Just updated the stackblitz with a working solution, and posted my solution. There should be a more elegant way to solve it, but this is a start. – saglamcem Dec 08 '19 at 23:25

1 Answers1

0

After investigating the stackblitz, I see that the problem indeed was that the "i" value was increasing up to the list's length immediately, so wherever you clicked except for the first one, you were going to the last page.

I added a listIndex value to the map iteration, and incremented it there. You can follow the console.log statements, as well as the printed things on the screen.

This is a working solution but I'm more than certain there's a more elegant way to solve this (move it into a function etc).

render() {
    let i = 1;
    return <Parallax pages={this.state.liste.length + 1} scrolling={true} vertical ref={ref => (this.parallax = ref)}>
        <ParallaxLayer key={0} offset={0} speed={0.5}>
            <span onClick={() => this.parallax.scrollTo(1)}>MAINPAGE</span>
        </ParallaxLayer>
        {this.state.liste.map((category, listIndex) => {
            return (
                <ParallaxLayer key={category.categoryId} offset={listIndex + 1} speed={0.5}>
                    <span onClick={() => { this.parallax.scrollTo(listIndex + 1) }}>{category.categoryName} - test</span>
                    {listIndex += 1}
                    {console.log(listIndex)}
                </ParallaxLayer>
            );
        })}
    </Parallax>
}

Let me know if I can help with anything else.

saglamcem
  • 677
  • 1
  • 8
  • 15
  • Thanks for the effort again, i wasn't know that i can do the map iteration thing with the second parameter.But I must ask, offset value and scrollTo value seems same *listIndex+1* but it works very well.How can it be :) – Kadir Akın Dec 08 '19 at 23:37