score:2
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",
},
]
Source: stackoverflow.com
Related Query
- Using a React hook in separate file to the component
- Sizing one component by getting the width of another one using useRef hook in React
- React custom Hook using useRef returns null for the first time the calling component Loads?
- Uploading a file using only the input field - React Hook Form
- React hook changing the state variable of wrong component when file input
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- React functional component using the `useState` hook does not update onChange using ReactiveSearch
- Is it possible to embed a dynamic react component into a separate html file without downloading a file or using a server?
- calling the Redux-Thunk Action after Component Mount by using useEffect. but got issue : React Hook useEffect has missing dependencies
- Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component when using Create React App and Formik
- Hook error using Truffle React box (transforming the App.js from Class component to Functional component)
- Unable to get the formData values of file upload using react hook form
- How to allow input type=file to select the same file in react component
- How to make the whole Card component clickable in Material UI using React JS?
- Using the useParams hook in react
- How to pass the match when using render in Route component from react router (v4)
- Parcel: using separate SCSS files for each React component, but with a variables file
- Can I use an HTML5 audio element to play a sound file in a functional component using React Hooks?
- Is there a reason people prefer using the constructor of a React component instead of componentWillMount?
- How to import a component or file in React using variables?
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- My React app is using values from the .env file instead of the .env.local file
- Using React how do I toggle the visibility of a nested component from a container component?
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- how to write inline js event handler code in the react component using "this"
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- The validation errors are not showing using React Hook Form
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- Getting the ref from a dynamic component when using Redux, React and react-router-dom 4.x
- Importing and using component from custom React Component Library results in Invariant Violation: Invalid hook call
More Query from same tag
- Mobx and d3 Stacked Bar in React
- Why should addChangeListener be in componentDidMount instead of componentWillMount?
- How to manage async functions using React Hooks API
- React-router changes location but doesn't render component
- How to Stop component to refresh after axios post in react. After uploading image from formData
- Trying to import a img in react
- After Axios request my React state is still empty
- how to send a user onClick event to different endpoint urls based on the button clicked using ReactJS and Axios
- How is state passed to selectors in a react-redux app?
- API request infinity. Why?
- How can i delete data from a table?
- Cant use uuid4 in react-native
- How to send data from styled component to a function?
- Set value in useState after redux dispatch
- What does the hook numbers in the Reactjs Dev tool correspond to?
- How to add user input objects to arrays in React using useState
- Type '(props: Props) => Element[]' is not assignable to type 'FunctionComponent<Props>'
- cant get req object in post fetch
- How to create a basic Tooltip in React where you don't actually wrap the anchor element in another DOM element?
- different nav bar for different pages in react
- How to initialize a FieldArray from state using redux-form?
- mongodb update Unexpected token
- How to get specific object key in array using MUI multiple autocomplete and useState hook?
- goBack() taking me all the way to first entry instead of where I want to be
- How to change material-ui Textfield label styles in react
- Material-ui classes name changes on build, adds identifiers to each class name that are overriden by user
- ReactJS useState hook - asynchronous behaviour
- React fragment shorthand failing to compile
- Width added to main-panel div Causing Pages Width to extend over the Window
- Assign local storage to react state. React Hooks