I'm want to grab the title of an item in an object array and display it on the console. However, everything in the title gets truncated after a white space. How do you overcome this issue?

Here's the code:

const menu = [
  {
    id: 1,
    title: "GUNPOWDER GOBHI",
    category: "Small Plates",
    price: 16.99,
    img: "sp1.png",
    desc: `Crispy Cauliflower, Spicy Lentil Dust`,
  },
]

window.addEventListener("DOMContentLoaded", function () {
  initialDisplay(menu);
});

function diplayMenuItems(menuItems) {
  let displayMenu = menuItems.map(function (item) {
    return `<article class="menu-item">
          <img src=${item.img} alt=${item.title} class="photo" />
          <div class="item-info">
            <h4>${item.title}</h4>
            <h4 class="price">$${item.price}</h4>
            <p class="item-text">
              ${item.desc}
            </p>
            <button class="add-btn" data-title=${item.title}>Add To List</button> //I insert the title in the data
          </div>
        </article>`;
  });
  displayMenu = displayMenu.join("");

  sectionCenter.innerHTML = displayMenu;

  const addBtns = document.querySelectorAll('.add-btn');
addBtns.forEach(function(btn){
btn.addEventListener('click', function(e){
    const title = e.currentTarget.dataset.title; //I grab title
    console.log(title); // The title is displayed but everything after the white space doesn't show up
});
});
}