Cannot go back to the first section with dynamically sections

[katrien-c]

Hi,

When I load data via axios, I can not go back to the first section (unless I click on the prev button). Scrolling or keyboard up-button doesn't work.
But if I use static data, the problem doesn't occur. Is there something that I'm missing ?

My whole (simple) example

import React, { Component } from 'react';
import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage';
import axios from 'axios';

class Example extends Component {
    constructor(props) {
      super(props)
      this.state = {
        current: 0,
        todos: []
      }
    }
    componentDidMount() {
        axios.get('http://jsonplaceholder.typicode.com/todos?_limit=5').then((response)=>{
            this.setState(()=>{
               return {
                 todos: response.data
               }
            })
        });
    }
    render() {
        const options = {
            sectionClassName: 'section',
            anchors: ['sectionOne', 'sectionTwo', 'sectionThree', 'sectionFour', 'sectionFive'],
            scrollBar: false,
            navigation: true,
            verticalAlign: false,
            sectionPaddingTop: '0px',
            sectionPaddingBottom: '0px',
            arrowNavigation: true,
            scrollCallback: (states) => this.setState({current: states.activeSection})
        };
        const {current} = this.state
        return (
            <div>
                 <ScrollToTopOnMount />
                <SectionsContainer className="container" {...options} activeSection={current}>
                    { this.state.todos.map((item)=>{
                            return <Section key={item.id}>{item.title}</Section>
                        })
                    }
                </SectionsContainer>
                <div className="btnGroup">
                    <button onClick={() => this.setState({current: current - 1})} disabled={current === 0}>pre</button>
                    <button onClick={() => this.setState({current: current + 1})} disabled={current === 2}>next</button>
                </div>
            </div>
        )
    }
}
export default Example;

if I change

                    { this.state.todos.map((item)=>{
                            return <Section key={item.id}>{item.title}</Section>
                        })
                    }

into static sections like this:

                    <Section>1</Section>
                    <Section>2</Section>
                    <Section>3</Section>
                    <Section>4</Section>
                    <Section>5</Section>

the problem doesn't occur.

Is this a (known) bug? How can I solve it ?

[katrien-c]

Ok, I've solved this 'bug' by changing the source code of react-fullpage:
in SectionsContainer.js I've replaced line 39

this._childrenLength = this.props.children.length;

into this

this._childrenLength = this.props.anchors.length;