Is there a way to dynamically change the background color of the body on certain pages using Redux state? I'm encountering an issue where the color specified in the store is not recognized when passed in the componentDidMount() function.
Here's my code:
componentDidMount() {
this.props.list(this.props.match.params.page && decodeURIComponent(this.props.match.params.page));
this.props.list_admin();
document.body.style.backgroundColor = this.props.data_admin.backgroundColorFirst;
}
componentWillUnmount() {
this.props.reset();
document.body.style.backgroundColor = null;
}
const mapStateToProps = (state) => {
return {
data_admin: state.admin.list.data,
};
};
const mapDispatchToProps = (dispatch) => {
return {
list_admin: (admin) => dispatch(list_admin(admin)),
reset: () => {
dispatch(reset());
dispatch(success(null));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(List);
Given this setup, how can I ensure that the style is applied to the body when the color is defined in the 'data_admin' prop?
Thank you for your assistance.