RangeError: Maximum call stack size exceeded with vanilla JS - post

Question

I'm finishing my first project where I POST data to a server and then retrieve it in the form of a list on a separate page. I have gotten to the point where I can now post and retrieve the data, however I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
at renderSearchResults (menu.js:8)
at renderSearchResults (menu.js:38)
My code is below. Any help would be appreciated.
var userInfo = JSON.parse(sessionStorage.getItem('user'));
function search() {
/* var userInfo = JSON.parse(sessionStorage.getItem('user')); */
var xhr = new XMLHttpRequest();
xhr.open('GET', (`https://ict4510.herokuapp.com/api/menus?api_key=${userInfo.user.api_key}` ));
xhr.onload = function renderSearchResults() {
if (this.status == 200) {
var menuInfo = JSON.parse(this.responseText);
var output = '';
for (var i in menuInfo.menu) {
output +=
'<div class="foodItems">' +
'<ul>' +
'<li>Food Item: ' + menuInfo.menu[i].item + '</li>' +
'<li>Description: ' + menuInfo.menu[i].description + '</li>' +
'<li> Price: ' + menuInfo.menu[i].price + '</li>' +
'</ul>' +
+
'</div>';
}
console.log(output);
document.getElementById('foods').innerHTML = output;
}
renderSearchResults();
}
xhr.send();
}
search();