How to render a component after a async request with React & Sitecore JSS?

Question

I have a simple article page. I should have an infinite scroll implementation, meaning once a user has reached the bottom of the page, I should load the next article.

How can I render a component after an axios request? I think the good approach is to use a placeholder. I am a rookie on Sitecore JSS, I searched in the doc but I can't find the missing key.

class ArticleContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            component: null
        };
    }

    componentDidMount() {
        this.getNextArticle();
    }

    getNextArticle() {
        const fetchOptions = {
            layoutServiceConfig: { host: config.sitecoreApiHost },
            querystringParams: { sc_lang: 'en', sc_apikey: config.sitecoreApiKey },
            fetcher: dataFetcher
        };

        dataApi.fetchRouteData('/next-article', fetchOptions).then(route => {
            this.setState({
                component: route
            });
        });
    }

    render() {
        return (
            <div>
                <Article
                    title={this.props.fields.title}
                    author={this.props.fields.author}
                    views={this.props.fields.views}
                    datePublished={this.props.fields.datePublished}
                    readTime={this.props.fields.readTime}
                    imageDesktop={this.props.fields.imageDesktop}
                    rendering={this.props.rendering}
                />
                {/* This is where I want the new article to be append dynamically */}
                <section>{<Placeholder name="jss-next-article" rendering={this.state.component} />}</section>
            </div>
        );
    }
}

data.yml - next article

id: next-article
fields:
  pageTitle: Welcome to Article Sitecore JSS
placeholders:
  jss-next-article:
  - componentName: ArticleContainer
    fields:
      title: title of the article
      etc.

Answer 1

Don't use placeholder for pages, just have a placeholder for the articlecontainer. In articlecontainer just draw all the fetched articles using normal React practices.

Something like.

{this.state.articles.map((a)=><Article key={a.id} data={a})>)}