Uncaught TypeError: Cannot read properties of undefined (reading '0') in Simple React Project

Question

Trying to learn React and code this simple photo app. The problem is next:

Collection.jsx:6 Uncaught TypeError: Cannot read properties of undefined (reading '0')

So why this is happening? When i am not mapping Collection element in div className="content section, all worked fine. Where is key of problem?

my Collection element:

export const Collection = ({ images, name }) => {
    return (
        <div className="collection">
            <img className="collection__big" src={images[0]} alt="Item" />
            <div className="collection__bottom">
                <img className="collection__mini" src={images[1]} alt="Item" />
                <img className="collection__mini" src={images[2]} alt="Item" />
                <img className="collection__mini" src={images[3]} alt="Item" />
            </div>
            <h4>{name}</h4>
        </div>
    );
};

my App element:

import React from 'react';
import { Collection } from './Collection';
function App() {
    const [collections, setCollections] = React.useState([]);
    React.useEffect(() => {
        fetch('https://6391dc7eac688bbe4c54d694.mockapi.io/photo_collection')
            .then((res) => res.json())
            .then((json) => {
                setCollections(json);
            })
            .catch((err) => {
              console.warn(err);
              alert('Дані неможливо завантажити')
            });
    }, []);
    return (
        <div className="App">
            <h1>Моя колекція фотографій</h1>
            <div className="top">
                <ul className="tags">
                    <li className="active">Загальні</li>
                    <li>Гори</li>
                    <li>Море</li>
                    <li>Архітектура</li>
                    <li>Міста</li>
                </ul>
                <input className="search-input" placeholder="Пошук по назві" />
            </div>
        <div className="content">{
          collections.map((obj) => (
            <Collection
              name={obj.name}
              images={obj.photos}
            />
          ))
        }
        </div>
            <ul className="pagination">
                <li>1</li>
                <li className="active">2</li>
                <li>3</li>
            </ul>
        </div>
    );
}
export default App;

Answer 1

Your API sending collection inside first elements not direct ,here is your updated App.js

import React from 'react';
import { Collection } from './Collection';
function App() {
    const [collections, setCollections] = React.useState([]);
    React.useEffect(() => {
        fetch('https://6391dc7eac688bbe4c54d694.mockapi.io/photo_collection')
            .then((res) => res.json())
            .then((json) => {
              console.log(json);
                setCollections(json[0].collections);
            })
            .catch((err) => {
              console.warn(err);
              alert('Дані неможливо завантажити')
            });
    }, []);
    return (
        <div className="App">
            <h1>Моя колекція фотографій</h1>
            <div className="top">
                <ul className="tags">
                    <li className="active">Загальні</li>
                    <li>Гори</li>
                    <li>Море</li>
                    <li>Архітектура</li>
                    <li>Міста</li>
                </ul>
                <input className="search-input" placeholder="Пошук по назві" />
            </div>
        <div className="content">{
          collections.map((obj) => (
            <Collection
              name={obj.name}
              images={obj.photos}
            />
          ))
        }
        </div>
            <ul className="pagination">
                <li>1</li>
                <li className="active">2</li>
                <li>3</li>
            </ul>
        </div>
    );
}
export default App;