How should I traverse through a folder of .gifs to display them in a list using Gatsby.js

Question

I am trying to figure out how to best display a list of gifs, for starters, located locally in a directory on my machine using Gatsby.js. I did a long Gatsby tutorial that went through using gatbsy-remark and gatsby-image-remark, etc and found that those plugins did not like .gifs... Specifically, anything that required the gatsby plugin 'gatsby-plugin-sharp' and 'gatsby-transformer-sharp' did not work when trying to display gifs. GrahpQL even warns you that targeting childImageSharp on an object that is a .gif will return null and it does...

So I have this gatsby code I'm using in a navigation component...

import React from "react"
import Logo from "../images/glitch-logo.gif"
import Menu from "./menu"

import * as headerStyles from './header.module.scss'


class Navigation extends React.Component {

  render() {
    return (
      <>
        <img className={headerStyles.logo} src={Logo} alt="NFT Category Filter" onClick={() => this.toggleMenu()} onKeyDown={this.handleClick}></img>
        <Menu ref={el => (this.childMenu = el)} />
      </>
    )
  }

  toggleMenu() { 
    this.childMenu.open()
  }
}

export default Navigation

can't I just do something similar in my index file if, for example, I wanted to display an array of .gifs? Something like this?

import * as ImageList from '../images/categories' //folder with .gifs!!!
import Layout from '../components/layout'
import * as layoutStyles from '../components/layout.module.scss'




const IndexPage = () => {
  
  const ImageList = (props) => {
    const nfts = props.nfts;
    const listImages = nfts.map((nft) => {
      <li>{nft}</li>
      }
    )
  } 

or is there a plugin for gatsby worth downloading that makes using .gifs easier?

Answer 1

Your approach, assuming all the notation-related stuff (paths, naming, etc) is correct. However, your IndexPage should look like:

const IndexPage = (props) => {
    const nfts = props.nfts;

   return <ul>
   {nfts.map((nft) => {
      return <li>{nft}</li>
   }}
   </ul>
  } 

• .map loops need to return an array, you were missing the statement.
• The props are inherited from the top-level components, not from their inner functions. So props, should be got by IndexPage and used in the JSX loop in the return statement of the component.