Why is the length of a non-empty array is 0

Question

There is a code, in it I create links by data and put into an array:

function Blogs(props) {
    const links = [];
    props.ids.forEach(id => {
        fetch(`${root}/api/blog/${id}`)
            .then(res => res.json())
            .then(res => {
                const link = <Link to={`/blog/${id}`}>{_.get(res, 'blog.name', '')}</Link>
                links.push(link);
            })
    });
    console.log(links.length) // 0
    return (
        <div className="profile-blogs">
            <div className="a">Блоги</div>
            <div className="b">
                {links}               {/* nothing */}
            </div>
        </div>
    );
}

When I consoling a links:

Why links.length === 0 and how to fix it?

Answer 1

You need to use two of the react hooks; useState for links array, useEffect for fetch function.