Функция не определена, когда она

Question

У меня есть функция, которая загружает некоторый базовый HTML-код в DOM, а затем вызывает функцию map () для распространения списка свойств из массива с вложенными объектами. Поскольку в массиве есть несколько объектов, у меня есть map (), запускающая другую функцию для возврата разметки HTML с соответствующими значениями. Когда он пытается запустить, я получаю ошибку, что 'getListing' не определен, когда это не так. Какие-нибудь советы?

У меня JS разбит на отдельные файлы. Но когда я пытаюсь поместить функцию 'getListing' в тот же файл, она объявляет, что функция 'buy' не определена.

function buy(properties) {
    $('.main').empty();
    $('.main').append(
        `<div class='buyPage'>
            <header>
                <h2>4 Properties for you</h2>
            </header>
            <div id='listingResults'>
            </div>
        </div>`
    );
    console.log(properties);
    document.getElementById('listingResults').innerHTML = properties.map(
        listing => getListing(listing)
    );
    console.log(document.getElementById('listingResults'));
}

function getListing(listing) {
    return (
        <div class='searchItem' id={listing.id}>
            <img
                src={'images/listings/' + listing.image}
                alt={'image of: ' + listing.name}
                class='searchImg'
            />
            <p>
                Property name: {listing.name}
                <br />
                Address: {listing.address}
                <br />
                City: {listing.city}
                <br />
                Canton: {listing.canton}
                <br />
                Price: {listing.price}
                <br />
                <a href={listing.link}>Link</a>
            </p>
        </div>
    );
}