0
396
ViewsUncaught TypeError: Cannot read properties of undefined (reading 'url')
I'm new to react js, I'm getting Uncaught TypeError: Cannot read properties of undefined (reading 'url') error due to fetching images map. If I use data already on the file, it works fine, but if I have to fetch the data, it creates This error. This is what is tried. please let me know how to fix this error.
const THECATAPI = 'https://api.thecatapi.com/v1/breeds'
const [catList, setCatList] = useState([])
const axiosPosts = async () => {
try {
const response = await axios(THECATAPI)
setCatList(response.data)
} catch (error) {
console.log('erroRRRR');
}
};
// return
<div>
{
catList.map((obj, i) => (
<div >
<img src={obj['image']['url']} alt='loading' />
</div>
}
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Since you are accessing the nested value from the array, there may be some cases, the value might not be presented. You can use optional chaining while accessing the nested field. You can simply change your block of code like this.
{catList.map((obj, i) => (
<div key={obj?.id}>
<img src={obj?.image?.url} alt="loading" />
</div>
))}
Attaching the sandbox here.
·
Juan Pablo Isaza
Report
Answer question