I have a problem with fetching data from the backend. when I try to render data from the backend I have the error
Portfolio.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'self')
at Portfolio.render (Portfolio.js:34:1)
at finishClassComponent (react-dom.development.js:17485:1)
at updateClassComponent (react-dom.development.js:17435:1)
at beginWork (react-dom.development.js:19073:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
The code
import React, { Component } from 'react'
import { Card } from 'react-bootstrap'
import { Row } from 'react-bootstrap'
import { MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBRow, MDBCol, MDBContainer, MDBRipple, MDBCardOverlay, MDBCardLink } from 'mdb-react-ui-kit';
import axios from 'axios';
import { ThemeConsumer } from 'react-bootstrap/esm/ThemeProvider';
export default class Portfolio extends Component {
constructor(props){
super(props);
this.state={
photoAlboums:[]
};
}
componentDidMount(){
axios.get("http://localhost:8081/api/photo-albums/1")
.then((response) => {
this.setState({photoAlboums: response.data});
})
}
render() {
return (
<div>
<p>{this.state.photoAlboums._links.self.href}</p>
</div>
)
}
}
The data
{"id":1,"name":"Photo studio","_links"
:{"self":{"href":"http://localhost:8081/api/photo-albums/1"},
"photoAlbums":{"href":"http://localhost:8081/api/photo-albums/list"}}}
But when I render the name of data, everything works. How to solve this problem? Thanks!
{this.state.photoAlboums._links.self.href}
compare withphotoAlbums