score:2

Accepted answer

you have to define a custom hook, which looks something like this in your case:

import react from "react"
import image from "gatsby-image"
import { graphql, usestaticquery } from "gatsby"

const getimages = graphql`
  {
    btu: file(relativepath: { eq: "eventimage/btu.jpeg" }) {
      childimagesharp {
        fixed(height: 120, width: 500) {
          ...gatsbyimagesharpfixed_withwebp_tracedsvg
        }
      }
    }
  }
  `;

export function usedetails() {    
  const data = usestaticquery(getimages);

  return [
    {
      id: 1,
      img: <image fixed={data.btu.childimagesharp.fixed} />,
      date: "2 oct 2020",
      distance: "30km - 160km",
      name: "brisbane trail ultra",
      location: "brisbane, qld",
    },
  ];
}

to define custom hooks, define a function, which returns your desired values. in this function you can all hooks available from the react api.

then in your main file write

const eventcalendar = () => {
  const details = usedetails();

  return (
    <layout>
      <section>
        {details.map(detail => {
          return <eventcard key={details.id} {...detail}></eventcard>
        })}
      </section>
    </layout>
  )
}

score:0

only call hooks from react functions don’t call hooks from regular javascript functions. instead, you can:

✅ call hooks from react function components.

✅ call hooks from custom hooks (we’ll learn about them on the next page). another thing: inside the map, you should change details to detail because is an item

const eventcalendar = () => {
  return (
    <layout>
      <section>
        {details.map(detail => {
          return <eventcard key={details.id} {...detail}></eventcard>
        })}
      </section>
    </layout>
  )
}

you can read about hook is here: https://reactjs.org/docs/hooks-rules.html

my suggestion is you can wrap it into component like that:

const imagehook = () => {
  const data = usestaticquery(getimages)
  return <image fixed={data.btu.childimagesharp.fixed}/>
}

export const details = [
  {
    id: 1,
    img:  <imagehook />,
    date: "2 oct 2020",
    distance: "30km - 160km",
    name: "brisbane trail ultra",
    location: "brisbane, qld",
  },
]

Related Query

More Query from same tag