Solved
AEM SPA - React - Update React Component after updating Java Model with Query Param
I have a Java model that populates my react component. The model can take an offset value to return the next 10 newest items which I am passing via a query param (?page=). Right now I am using ModelManager.getData to fetch the json with ?page=2 to return 10 new items. I have this working now by setting state on the whole props object for the component and updating state on click.
Im curious if theres a better design pattern for updating java models via query params and then refreshing the front end model in AEM? Or maybe I'm already on the right path.
export default class BlogFeed extends Component {
baseCss = 'BlogFeed';
constructor(props) {
super(props);
this.state = {
blogFeed: this.props.blogFeed
};
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// Pass param to component model directly
const componentPath = this.props.cqPath + ".model.json?page=2";
ModelManager.getData({path : componentPath}).then(blogFeedData => {
this.setState({
blogFeed : blogFeedData.blogFeed
});
});
}
render() {
return (
<div className="BlogFeed-container">
<button onClick={this.handleClick}>GET NEXT PAGE</button>
{ this.renderBlogs(this.state.blogFeed) }
</div>
);
}
}