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.