How to use variables across files in React JS - reactjs

Question

So I have set two datepickers which needs to be reformatted to MM-YYYY which I done with the following code:
const [dateFrom, setDateFrom ] = useState('2012-01-01')
const [dateTill, setDateTill ] = useState('2012-12-31')
const [yearFrom, monthFrom, dayFrom] = dateFrom.split('-');
const newDateFrom = `${monthFrom}-${yearFrom}`
const [yearTill, monthTill, dayTill] = dateTill.split('-');
const newDateTill = `${monthTill}-${yearTill}`
export default {newDateFrom, newDateTill}
I want to use the newDateFrom and newDateTill variables in my api file located in my api folder. I have used string interpolation here.
export const fetchTimeData = async () => {
const response = await fetch(`https://api.punkapi.com/v2/beers?brewed_before=${newDateTill}&brewed_after=${newDateFrom}&per_page=80`)
const data = await response.json();
return data
}
How can I get this to work? I'm not sure if props would work as there isn't a parent-child relationship going on here?
Thank you

Answer 1

You can't call the useState function in the global scope; if you want the variables returned from useState to be accessible to other functions, you need to make a custom hook like the following:
export function useNewDate() {
const [dateFrom, setDateFrom ] = useState('2012-01-01')
const [dateTill, setDateTill ] = useState('2012-12-31')
const [yearFrom, monthFrom, dayFrom] = dateFrom.split('-');
const newDateFrom = `${monthFrom}-${yearFrom}`
const [yearTill, monthTill, dayTill] = dateTill.split('-');
const newDateTill = `${monthTill}-${yearTill}`
return {newDateFrom, newDateTill}
}
Then, because you're using hooks, your fetchTimeData also needs to be a hook:
import { useNewDate } from './useNewDate' // or whichever file your useNewDate hook is stored in
import { useState, useEffect } from 'react';
export const useFetchTimeData = () => {
const { newDateFrom, newDateTill } = useNewDate()
const [timeData, setTimeData] = useState(null)
useEffect(() => {
(async () => {
const response = await fetch(`https://api.punkapi.com/v2/beers?brewed_before=${newDateTill}&brewed_after=${newDateFrom}&per_page=80`)
const data = await response.json();
setTimeData(data)
})();
}, [])
return timeData
}
Then, whenever you want to fetch the time data from within a React component, you would import this hook:
import { useFetchTimeData } from './useFetchTimeData'
export function MyComponent() {
const timeData = useFetchTimeData();
if (timeData === null) {
return <div>Loading time data...</div>
}
return <div>{JSON.stringify(timeData)}</div>
}