Hide or show div according data json in Astro's component

Question

I have site.json in my project with a lot of strings of data. How can I read the json file and hide or show specific div according to JSON data? Since my projects, for which I create components, do not all contain references to githab or have a domain name, I need to show svg only to those that have such links in json.

Projects.astro:

---
import ProjectItem from './ProjectItem.astro';
import site from "../data/site.json";
const title = `Projects I’ve been working on`;
const {projects} = site;
---
<section id="projects">
    <h3>{title}</h3>
        {projects.map((item) => (
            <ProjectItem item={item} />
        ))}
</section>

In ProjectItem.astro pay attention please to "div class="external" where created two links for external link and project's github. I want to create them if in site.json there is specific information for each my project. Now these links are created in any case, have information about githab or domain name or not. I tried to write a script in javascript, but I couldn't.

'ProjectItem.astro':

---
const { item } = Astro.props;
---
<div class="project-item-grid">
    <div class="project-item-right">
        <div class="external">
            <a href={item.link} class="link">
                <img src="assets/external_link_100.svg" />
            </a>
            <a href={item.github} class="link">
                <img src="assets/github_100.png" />
            </a>
        </div>
    </div>
</div>

This is my site.json. I made it smaller because it's big. But notice the "projects", especially projects->link and projects->github.

{
"skills": {
      "comfortable": [
            {...}],
      "familiar": [
            {...}],
},
"projects": [
      {
        "title": "Title1",
        "link": "link1.com",
        "github": "link1.github.io"
      },
      {
        "title": "Title2",
        "link": "link2.com",
        "github":             // information is absent. I think you can put null or "" instead an empty field.
      },
        "title": "Title3",
        "link": ,             // now link's information is absent.
        "github": "link3.github.io"           
      },
... etc.
]}

---

There I have tryed to solve the problem myself with JS:

const file = require('../data/site.json');
try {
      const data = JSON.parse(file)
     } catch(err) {
         console.error(err)
     }
for (let i=0; i < 3; i++) {
        if (data.projects[i].github === null) {
            document.getElementById('github').style.display = 'none'
            console.log("Catch!");
        } else {
            console.log("No catch");
        }
    }

Answer 1

Try this out:

Just used ternary operator to hide null or undefined value.

---
const { item } = Astro.props;
---
<div class="project-item-grid">
    <div class="project-item-right">
        <div class="external">
            <a style={item.link? ' ':'display:none'} href={item.link} class="link"> 
                <img src="assets/external_link_100.svg" />
            </a>
            <a style={item.github? ' ':'display:none'} href={item.github} class="link">
                <img src="assets/github_100.png" />
            </a>
        </div>
    </div>
</div>