Display data dynamically from component using javascript in astro.js

Question

Astro.js & Javascript

Inside of a component i'm trying to map over some data one time and display different data from each rendered component in another file.

The component responsible for mapping the data

---
const skills = [
    {
        name: 'Frontend',
        id: 1,
        frontend: [ 'HTML', 'CSS' ]
    }, 
    {
        name: 'Backend',
        id: 2,
        backend: [ 'Firebase', 'PHP' ]
    }
]
---

{skills.map(skill => (
    <li>
        <h4 class="role me-2 astro-FP6HE37A"> {skill}
            <span class="invert position-absolute d-flex align-items-center justify-content-center h-100 w-100 astro-FP6HE37A"> {skill}</span>
        </h4>
    </li>
))}

The file responsible for displaying the said component

---
import SkillsIcon from '../components/SkillsIcon.astro';
---

<h3>Frontend</h3>
    <SkillsIcon />
<h3>Backend</h3>
    <SkillsIcon />

score 0 · Answer 1 · answered Jan 16 '23 at 18:26

you can place everything in one component like this, note renaming generic field as 'tags' not to create a dependency of the array elements to their own content

---
const skills = [
    {
        name: 'Frontend',
        id: 1,
        tags: [ 'HTML', 'CSS' ]
    }, 
    {
        name: 'Backend',
        id: 2,
        tags: [ 'Firebase', 'PHP' ]
    }
]
---
{skills.map(skill => (
    <h3>{skill.name}</h3>
    <ul>
        {skill.tags.map(tag => (
            <li>
                <h4 class="role ... ">
                    <span class="invert ...">{tag}</span>
                </h4>
            </li>
        ))
        }
    </ul>
))}

If it is important to have two separate components, you can place your data on an external JSON file and import it in both components and pass as argument to the child component the array index you want to map in the component, like this

{skills.map((skill,index) => (
    <h3>{skill.name}</h3>
    <SkillIcon index={index} />
))}

reference for json import in astro https://docs.astro.build/en/guides/imports/#json

Display data dynamically from component using javascript in astro.js

1 Answers1