error when moving to another page next js

I’m receiving this error when moving to another page in next js 1 of 3 unhandled errors Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading ‘pagenum’) Source pages\dpt[dptid]\rewayat[rewid][subrewid]\surah[surahid]\p[pid].js (89:36) @ Page 87 | imag = /image/${dptid}/${rewid}/${subrewid}/${surahid}/${pid}.png; 88 | 89 | pagenum = surahs[surah${surahid}].pagenum; | ^ 90 | console.log(pagenum); 91 | page = surahs[surah${surahid}].page;… Read More error when moving to another page next js

how to destructure property if possibly undefined?

I’m getting stuck on this TS error created at build time. Does anyone has any suggestions? TypeError: Cannot destructure property ‘site’ of ‘(intermediate value)’ as it is undefined. export default function Project({ data, preview, }: { data: any preview: any }) { const { site, page } = data?.post return ( <Layout site={site} page={page}> //… Read More how to destructure property if possibly undefined?

Is the function "next" a good practice to find first occurrence in a iterable?

I’ve learned about iterators and such and discovered this quite interesting way of getting the first element in a list that a condition is applied (and also with default value in case we don’t find it): first_occurence = next((x for x in range(1,10) if x > 5), None) For me, it seems a very useful,… Read More Is the function "next" a good practice to find first occurrence in a iterable?

How do I handle server side rendering error in Nextjs?

I’m trying to implement server side rendering in Nextjs using sanity studio to fetch the posts. interface Props { posts: [Post]; } export default function Home({ posts }: Props){ return ( <div className="max-w-7xl mx-auto"> <Head> <title>APP</title> <link rel="icon" href="/favicon.ico" /> </Head> <Header /> <div> {posts?.map((post) => ( <Link key={post._id} href={`/post/${post.slug.current}`}> <div> <img src={urlFor(post.mainImage).url()!} alt="" />… Read More How do I handle server side rendering error in Nextjs?

Right way to modify a property in a state object?

I’m working with react 17.0.2 and next 12.0.0, and use react-date-range (https://www.npmjs.com/package/react-date-range) I have this 3 states const [calendarDates, setCalendarDates] = useState(null); const [wasCleared, setWasCleared] = useState(true); const [focusedRange, setFocusedRange] = useState([0, 0]); Then, when i call the component: <DateRangePicker preventSnapRefocus showPreview showSelectionPreview direction="horizontal" focusedRange={focusedRange} minDate={new Date()} monthDisplayFormat="MMMM yyyy" months={2} ranges={calendarConfig.calendarDates} showDateDisplay={false} showMonthAndYearPickers={false} weekdayDisplayFormat="EEEEEE" onChange={item… Read More Right way to modify a property in a state object?

Field '_areas' should be initialized because its type 'List<Area>' doesn't allow null

Flutter shows error Non-nullable instance field ‘_areas’ must be initialized. Maybe this is because of not defining null in lists areas what when defining null Like List? _areas; it shows an error on the index Error: Field ‘_areas’ should be initialized because its type ‘List’ doesn’t allow null. Error Line: List _areas; Here is my… Read More Field '_areas' should be initialized because its type 'List<Area>' doesn't allow null