Array still mapping even with no data

Question

I have a website that is mapping the products it is displaying from a JSON file. The JSON looks like this.

"litter3": [
    {
      "name": "Bates",
      "description": "Cute",
      "image": "./puppies/boo/bates.jpg"
    },
    {
      "name": "Blade",
      "description": "This one is fiesty",
      "image": "./puppies/boo/blade.jpg"
    },
    {
      "name": "Blair",
      "description": "Cute",
      "image": "./puppies/boo/blair.jpg"
    },

And so on. The page is mapping in the following way:

{litter1.map((litter1) => (
          <div className="col-sm-4" key={litter1.name}>
            <img
              className="homecard frame"
              src={litter1.image}
              alt={litter1.name}
            />
            <h1 className="puppyname">{litter1.name}</h1>

            <p className="puppysubtitle">{litter1.description}</p>
          </div>
        ))}

This is working as intended. However when the JSON data is empty there is an issue.

"litter4": [
    {
      "name": "",
      "description": "",
      "image": ""
    },
    {
      "name": "",
      "description": "",
      "image": ""
    },

Ideally I want my client to be able to have these already formatted pieces of code that she can fill in when necessary, and leave blank when not necessary. The issue is when the data is not there the page will still map the images. How do I prevent this from happening when the data is not provided?
Is this possible, or is there another way to accomplish this? Link to github repo
Thank you in advance for your help.

Answer 1

You can simply do a filter to the array before doing the map

litter1.filter(x=>x.title!=='').map((litter1) => (

You can have other conditions as well.