Dynamically pull slide content from file or API

[fredzannarbor]

For a React frontend for a web application running on Flask, I want to dynamically pull Swiper slide content from a directory (or in future API).

<SwiperSlide>
      <h3><a href="launcher/the_muses_speak">The Muses Speak</a></h3>
      <p>lorem ipsum</p>
      </SwiperSlide>
      <SwiperSlide>
      <h3><a href="launcher/baby-name-generator">Baby Name Generator</a></h3>
      <p>lorem ipsum</p>
      </SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>

I want to pull the content for the slide names, urls, and descriptions from a local directory that contains metadata files ending in json. The content of each metadata file looks like this:

[
{
    "id": "2",
    "preset_name": "Baby Name Generator (by Attributes)",
    "preset_author": "WebBabyShower.com",
    "preset_active": "True",
    "preset_launched": "20210610",
    "preset_description": "Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.",
    "preset_instructions": "Enter a few 'attributes' like 'French, girl, flowers' or 'African, nobility'. Words may be in any order." ...

In Python, I would do a for loop with a glob, but I can't figure how to do that in Swiper/JSX. In pseudocode, something like this:

for i in dir/*.json:
   <SwiperSlide>
   # read json from file to create slide
   </SwiperSlide>

Result: i slides displayed in the Swiper.

I can't see a path to dynamically create and insert the tags and what's between them. Help!