How to set component state with context.state? - reactjs

Question

I recently ran into an issue with React Context.
I have some data stored in localstorage which I only intend to use when there is no data available from the context provider.
The data from localstorage is stored in my component's state.
I would like to override this.state if there is available data coming from context.
The struggle is that I don't know how to set the state when the context can only be used in the render method.
It is a very bad practice to call a setState in the render and I have no idea how to get the context.state outside of the render.
If there is no data from
There is some sample code below.
Any ideas are welcome which are taking me closer to the solution.
constructor(props) {
super(props);
this.state = {
data: ''
}
}
componentDidMount() {
this.setState({
data: localstorage.getItem('data')
})
}
render() {
return (
<>
<AppContext.Consumer>
{context => (
<>
{typeof context.state.data !== 'undefined'&&
<div>
{/*Print out data from this.state or from context.state*/}
</div>
}
</>
)}
</AppContext.Consumer>
</>
)
}

Answer 1

You can access to context outside render with following trick:
import { PageTitleContext } from '../lib/pageTitleProvider';
import { Helmet } from 'react-helmet';
import * as PropTypes from 'prop-types';
class PageTitle extends Component {
componentDidMount() {
if (this.props.title)
this.props.context.setTitle(this.props.title);
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.title !== prevProps.title)
this.props.context.setTitle(this.props.title);
}
render() {
if (this.props.title) {
return <Helmet>
<title>{this.props.context.title}</title>
</Helmet>;
}
if (!this.props.title) {
return this.props.context.title;
}
}
}
PageTitle.propTypes = {
title: PropTypes.string,
context: PropTypes.object.isRequired,
};
export default (props) => (
<PageTitleContext.Consumer>
{(context) => <PageTitle {...props} context={context}/>}
</PageTitleContext.Consumer>
)