Hello there. I am very new to all this and am trying to render a simple image in my React (class based) component.
This is my code:
const Client = Prismic.client(apiEndpoint, { accessToken })
class Home extends Component {
constructor(props) {
super(props);
this.state = {
setDocData:this.setDocData,
doc:null,
}
}
componentDidMount() {
const fetchData = async () => {
const response = await Client.query(
Prismic.Predicates.at('document.type', 'home')
)
if (response) {
this.setState({
doc:response.results
})
console.log(typeof(this.state.doc));
}
}
fetchData()
}
render() {
const { content } = this.props;
// const { doc } = this.state;
return (
<div className={styles.host}>
<h1>IT WORKS</h1>
<pre>{JSON.stringify(this.state.doc, null, 2)}</pre>
</div>
);
// return <img src={JSON.stringify(this.state.doc.data.our_modules.url)} alt={doc.data.our_modules.alt} />
}
}
export default Home;
I am already able to render the JSON format of the response (doc) object and the state is updating itself successfully I believe but as soon as I try to render an I get the error: doc is null!!!
