I've got a problem with returning context.params from the nested files. It is happening because inside data.map(el => el.hours)it returns an array of objects. That's why I have to somehow map again to get all the values from the array. Have anyone knows how to solve this problem?
Structure:
- index.js
- [date]
- index.js
- [hour].jsDatabase:
[
{
date: '11-03-2022',
hours: [{ hour: '10-00' }, { hour: '11-00' }, { hour: '12-00' }],
},
{
date: '12-03-2022',
hours: [{ hour: '10-00' }, { hour: '11-00' }, { hour: '12-00' }],
},
][hour].js
import React from 'react'
import FormComponent from '../../components/FormCalendar/FormComponent'
import Layout from '../../components/Layout/Layout'
const Hours = ({ data }) => {
return (
<div className="flex h-screen flex-col">
<Layout>
<FormComponent data={data} />
</Layout>
</div>
)
}
export default Hours
export async function getStaticPaths() {
const res = await fetch(`http://localhost:3000/api/mongo`)
const data = await res.json()
const paths = data.map((el) => {
return {
params: {
date: `${el.date}`,
hour: el.hours.map((item) => `${item.hour}`),
},
}
})
return {
paths,
fallback: false,
}
}
export const getStaticProps = async (context) => {
const { params } = context
const res = await fetch(
`http://localhost:3000/api/mongo/${params.date}/${params.hour}`
)
const data = await res.json()
return {
props: { data },
}
}I've got an error: Error: A required parameter (hour) was not provided as a string in getStaticPaths for /[date]/[hour]