Uncaught TypeError: Cannot read properties of undefined (reading 'url')-CodePudding

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>

CodePudding user response：

Since you are accessing the nested value from the array, there may be some cases, the value might not be presented. You can use