CODEWITHSUNDEEP
javascriptreactjsaxios
Ganesh MB
Ganesh MB

Reputation: 1179

Uncaught 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>

Upvotes: 2

Views: 6557

Answers (1)

mc-user
mc-user

Reputation: 2071

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.

Edit nifty-snyder-frltdq

Upvotes: 4

Related Questions