#Dynamically rendering with JavaScript in Astro components

9 messages · Page 1 of 1 (latest)

valid solstice
#

Hi everyone, I'm trying to dynamically render a module's content depending on the index of an array which I've imported from a .md file. ```js---
import styles from "../styles/globals.css";
import * as members from "../pages/about.md";
export interface Props {
title: string;
}

const { title } = Astro.props;
let bas = 2;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/images/logo.png" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body class="font-Lato">
<slot />
<input
type="checkbox"
id={my-modal-${bas}}
class="modal-toggle test-input"
/>
<div class="modal">
<div class="modal-box w-11/12 max-w-5xl">
<h3 class="font-bold text-lg asd">
{members.frontmatter.teamMembers[bas].name}
</h3>
<p class="py-4">
{members.frontmatter.teamMembers[bas].position}
</p>
<div class="modal-action">
<label for={my-modal-${bas}} class="btn">Yay!</label>
</div>
</div>
</div>
<script defer is:inline>
let foo = 0;
const teamMemberContainers = [
...document.querySelector(
"body > astro-island > div > astro-slot > main > section.w-full.min-h-screen.my-10.grid > div > div"
).children,
];
const test = document.querySelector(".test-input");

  teamMemberContainers.forEach((member, index) => {
    member.addEventListener("click", function () {
      bas = index;
      console.log(bas);
    });
  });
</script>

</body>
</html>``` If you look at the script at the bottom of the file, I am mutating the value of bas which is declared in the frontmatter.

unknown.png
#

As you can see in my console, the value of bas is indeed changing, but my modal is only opening for the array indexed at [2] which is because the value of bas is set to 2 in the frontmatter. So I'm assuming it's not possible to change the value of a frontmatter variable?

#

I've tried getting around this by trying to import the .md file into my client side script at the bottom, but it's giving me a file not found error, even though I've deferred it, or added type="module"

vague carbon
#

I understand what you want to do but I fail to see where the conditional rendering logic is, would you elaborate on how you are conditionally rendering here so that we can find a solution close to what you got here ?

valid solstice
# vague carbon I understand what you want to do but I fail to see where the conditional renderi... 
<input
      type="checkbox"
      id={`my-modal-${bas}`}
      class="modal-toggle test-input"
    />
    <div class="modal">
      <div class="modal-box w-11/12 max-w-5xl">
        <h3 class="font-bold text-lg asd">
          {members.frontmatter.teamMembers[bas].name}
        </h3>
        <p class="py-4">
          {members.frontmatter.teamMembers[bas].position}
        </p>
        <div class="modal-action">
          <label for={`my-modal-${bas}`} class="btn">Yay!</label>``` Hey yeah absolutely! So it would be in this part of the code.
#

I know for a fact that this would work and that my logic is sound since I can make it work in a React component. But I'm curious as to how you'd deal with this using an Astro component.

vague carbon
#

If you don't plan to use a UI framework, you'll have to write some js logic to hide on click just like in html because, there's no reactivity built-in and Astro components are rendered on the server. To do this, I'd use a class that makes the modal visible when it's present, or toggle its visibility directly by manipulating the DOM element of the modal

#

Maybe something like this can help (ik w3school 😅 ) https://www.w3schools.com/howto/howto_css_modals.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

valid solstice
#

I've just changed my necessary components to React ones instead