Develop Reference

fixed element not filling the full width of the screen tailwind

I'm trying to fill the width of a fixed element in Tailwind to full width.
here's a screenshot of the modal:
Modal Screenshot
please ignore the text inside it as I'm still testing stuff out.
my code React:
import { Dialog, Transition } from '#headlessui/react'
import { Fragment, useState } from 'react'
import { Link } from 'react-router-dom'
export default function Modal2() {
let [isOpen, setIsOpen] = useState(true)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
return (
<>
<div className=" absolute right-1 top-5 p-2">
<button
type="button"
onClick={openModal}
className="flex rounded-3xl pl-6 pr-6 bb p-2 "
>
Open dialog
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 " onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
</Transition.Child>
<div className="fixed top-20 right-2 overflow-y-auto ">
<div className="flex justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="mb-10 w-full max-w-md transform overflow-hidden rounded-3xl bg-white p-6 text-left align-top shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Lorem, ipsum dolor.
</Dialog.Title>
<div className="mt-2">
<p className=" flex flex-col text-md text-gray-500">
<Link to={"/about"} className="py-1 ">dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
</p>
</div>
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={closeModal}
>
Got it, thanks!
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
)
}
this is the line that opens the Modal. I want to make the width stretch to full-screen width. :
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
I would appreciate any help.
I tried to use items-stretch and w-full. didn't work. I guess its because it's fixed.

I couldn't reproduce your problem exactly, so this might be off.
If I understand your goal correctly, you're targeting the wrong element. The Dialog component contains your modal, so that's the component which should
have display: flex and justify-content: center to centralize the modal horizontally.
So you should add the classes flex and justify-center to the Dialog component. You can also add items-center to centralize it vertically.
[...]
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 flex justify-center" onClose={closeModal}>
[...]

Popover on hover vue headllessui

I'm trying to implement the popover from headlessui of vue package with hover. I try to use the mouseenter and mouseleave and the other mouse events but nothing change.
Any solution? There is a better solution? i search on internet I cant nothing about this. I search on headlessui github discussions but nothing.
<template>
<div class="fixed top-16 w-full max-w-sm px-4">
<Popover v-slot="{ open }" class="relative">
<PopoverButton
:class="open ? '' : 'text-opacity-90'"
class="group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<span>Solutions</span>
<ChevronDownIcon
:class="open ? '' : 'text-opacity-70'"
class="ml-2 h-5 w-5 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80"
aria-hidden="true"
/>
</PopoverButton>
<transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-1 opacity-0"
enter-to-class="translate-y-0 opacity-100"
leave-active-class="transition duration-150 ease-in"
leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-1 opacity-0"
>
<PopoverPanel
class="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl"
>
<div
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
>
<div class="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
<a
v-for="item in solutions"
:key="item.name"
:href="item.href"
class="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<div
class="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12"
>
<div v-html="item.icon"></div>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">
{{ item.name }}
</p>
<p class="text-sm text-gray-500">
{{ item.description }}
</p>
</div>
</a>
</div>
<div class="bg-gray-50 p-4">
<a
href="##"
class="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<span class="flex items-center">
<span class="text-sm font-medium text-gray-900">
Documentation
</span>
</span>
<span class="block text-sm text-gray-500">
Start integrating products and tools
</span>
</a>
</div>
</div>
</PopoverPanel>
</transition>
</Popover>
</div>
</template>

Seems like common request in HeadlessUI community.
Another solution found this solution on Github that worked fine for me.
for vanilla vue 3 with js the original solution link Github Issue
Nuxt 3 with typescript maintaining accessibility here's the code ↓
<script setup lang="ts">
import { Popover, PopoverButton, PopoverPanel } from '#headlessui/vue'
interface Props {
label: string
hasHref?: boolean
href?: string
}
const props = defineProps<Props>()
const popoverHover = ref(false)
const popoverTimeout = ref()
const hoverPopover = (e: any, open: boolean): void => {
popoverHover.value = true
if (!open) {
e.target.parentNode.click()
}
}
const closePopover = (close: any): void => {
popoverHover.value = false
if (popoverTimeout.value) clearTimeout(popoverTimeout.value)
popoverTimeout.value = setTimeout(() => {
if (!popoverHover.value) {
close()
}
}, 100)
}
</script>
<template>
<Popover v-slot="{ open, close }" class="relative">
<PopoverButton
:class="[
open ? 'text-primary' : 'text-gray-900',
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2'
]"
#mouseover="(e) => hoverPopover(e, open)"
#mouseleave="closePopover(close)"
>
<span v-if="!hasHref">{{ props.label }}</span>
<span v-else>
<NuxtLink :to="href">
{{ props.label }}
</NuxtLink>
</span>
<IconsChevronDown
:class="[
open ? 'rotate-180 transform text-primary' : '',
' ml-1 h-5 w-5 text-primary transition-transform group-hover:text-primary'
]"
aria-hidden="true"
/>
</PopoverButton>
<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="opacity-0 translate-y-1"
enter-to-class="opacity-100 translate-y-0"
leave-active-class="transition ease-in duration-150"
leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 translate-y-1"
>
<PopoverPanel
class="absolute left-1/2 z-10 mt-3 ml-0 w-auto min-w-[15rem] -translate-x-1/2 transform px-2 sm:px-0"
#mouseover.prevent="popoverHover = true"
#mouseleave.prevent="closePopover(close)"
>
<div
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
>
<div class="relative grid gap-1 bg-white p-3">
<slot> put content here </slot>
</div>
</div>
</PopoverPanel>
</transition>
</Popover>
</template>

It is in the docs:showing-hiding-popover.
open is an internal state used to determine if the component is shown or hidden. To implement your own functionality, you can remove it and use the static prop to always render a component. Then you can mange the visibility with your own state ref and a v-if/v-show. The mouse-action has to be in the upper scope, so it is not triggered leaving the component, e.g. moving the mouse from button to panel.
Below is a modified example from the API documentation:
<template>
<Popover
#mouseenter="open = true"
#mouseleave="open = false"
#click="open = !open"
>
<PopoverButton #click="open = !open">
Solutions
<ChevronDownIcon :class="{ 'rotate-180 transform': open }" />
</PopoverButton>
<div v-if="open">
<PopoverPanel static>
Insights
Automations
Reports
</PopoverPanel>
</div>
</Popover>
</template>
<script setup>
import { ref } from 'vue';
import { Popover, PopoverButton, PopoverPanel } from '#headlessui/vue';
import { ChevronDownIcon } from '#heroicons/vue/20/solid';
const open = ref(false);
</script>

Navbar component works in normal cases but breaks incase of getstatic props

I am trying to make a page with getstaticprops but I am unable to include my navbar component in it as console screams out element type is invalid. I can use the same navbar component during normal page rendering without static or server props. my staticprops page
import {Navbar} from "../components/schema/Navbar"
export default function Dope({users}) {
console.log(users)
return (
<div>
{/* <Navbar /> */}
<main>
<div>
{users.length === 0 ? (
<h2>No users added</h2>
) : (
users.map((user, i) => (
<h1 key={i}>{user}</h1>
))
)}
</div>
</main>
</div>
)
}
export async function getStaticProps(ctx) {
// get the current environment
let dev = process.env.NODE_ENV !== 'production';
let { DEV_URL, PROD_URL } = process.env;
// request posts from api
let response = await fetch(`${dev ? DEV_URL : PROD_URL}/api/users`);
// extract the data
let data = await response.json();
return {
props : {
users : data['message']
}
}
}
my navbar component is too big to fit in here but it returns a regular navbar without any fetch operations and uses tailwindcss where as I did not make use of tailwind to style this page yet. can this be the reason? although I feel it isn't
the api endpoint works fine as well.
Edit:
my navbar is using Popover(panel, button, group), transition elements from headlessui
and Fragment from react
import { Fragment } from 'react'
import { Popover, Transition } from '#headlessui/react'
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CursorClickIcon,
MenuIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
ViewGridIcon,
XIcon,
} from '#heroicons/react/outline'
import { ChevronDownIcon } from '#heroicons/react/solid'
const features = [
{
name: 'Airdrops',
href: '#',
description: 'Get a better understanding of where your traffic is coming from.',
icon: ChartBarIcon,
},
{
name: 'Updates',
href: '#',
description: 'Speak directly to your customers in a more meaningful way.',
icon: CursorClickIcon,
},
{ name: 'Airdrop Tracer', href: '#', description: "Your customers' data will be safe and secure.", icon: ShieldCheckIcon },
{
name: 'FAQ',
href: '#',
description: "Connect with third-party tools that you're already using.",
icon: ViewGridIcon,
},
{
name: 'About',
href: '#',
description: 'Build strategic funnels that will drive your customers to convert',
icon: RefreshIcon,
},
]
const resources = [
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums or contact support.',
href: '#',
icon: SupportIcon,
},
{
name: 'Guides',
description: 'Learn how to maximize our platform to get the most out of it.',
href: '#',
icon: BookmarkAltIcon,
},
{
name: 'Events',
description: 'See what meet-ups and other events we might be planning near you.',
href: '#',
icon: CalendarIcon,
},
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#', icon: ShieldCheckIcon },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Navbar() {
return (
<div className="relative bg-gray-50">
<Popover className="relative bg-white shadow">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="sr-only">Workflow</span>
<img
className="h-8 w-auto sm:h-10"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt=""
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-10">
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Airdrops
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Potential Airdrops
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Airdrop Tracer
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none'
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-1 mt-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-indigo-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<a href="#" className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900">
Sign in
</a>
<a
href="#"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</a>
</div>
</div>
</div>
<Transition
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
className="absolute top-0 inset-x-0 z-10 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt="Workflow"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
{features.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-indigo-600" aria-hidden="true" />
<span className="ml-3 text-base font-medium text-gray-900">{item.name}</span>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5 space-y-6">
<div>
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?
<a href="#" className="text-indigo-600 hover:text-indigo-500">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
</div>
)

Could you show us the Navbar code as well? can't really say what's going wrong without taking a look at the code.
Edit:
The problem is, when you import the Navbar component you are using a named import (an import with curly braces), and your Navbar component
is a default export, so you should use a default import like so:
import Navbar from "../components/schema/Navbar"
notice there are no curly braces.
check out this blog post -https://vhudyma-blog.eu/2020-09-27-default-vs-named-export-what-is-the-difference/

I was importing the function Navbar in a wrong manner. I was destructuring Navbar during import where as it should be a normal import

Next.js keeps throwing error params is undefined

I have successfully connected my custom server using Node.js and Express.js with Next.js. I'm trying to fetch a car by its id whenever I click it among other cars, so I can have that particular car only. But I keep getting an error saying params is undefined even though I get the id at the back of my link whenever I click on the single car in the browser. I've tried fetching the data using thunder client and everything works fine. I believe something is wrong with my frontend logic.
This is where I'm trying to fetch the data with the id
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Layout from "#/components/Layout";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import Authorization from "#/HOC/Authorization";
import axios from "axios";
const Car = () => {
const [data, setData] = useState("");
const oneCar = async (params) => {
const { id } = params;
const res = await axios.get(`http://localhost:5000/one-car/${id}`);
setData(res.data);
if (res.status !== 200) {
console.log(res.status);
}
};
useEffect(() => {
oneCar();
}, []);
return (
<Layout>
{data && (
<div className="flex flex-col w-11/12 mx-auto mt-8 justify-center bg-blue-200 rounded-lg shadow">
<div className="flex w-full justify-center mt-6 px-4 mx-auto box-shadow-lg h-2/4 relative">
<Image
src="/assets/images/d17.jpg"
alt="shopping image"
className="mx-auto flex rounded-lg inset-0 w-full h-2/4 object-cover"
width={1000}
height={500}
/>
</div>
<form className="flex-auto p-6">
<div className="flex flex-wrap">
<h1 className="flex-auto text-xl font-semibold text-gray-800">
{data.carName}
</h1>
<div className="text-xl font-semibold text-gray-700 ">
{data.carPrice}
</div>
<div className="w-full flex-none text-sm font-medium text-gray-500 mt-2">
In stock
</div>
</div>
<div className="flex items-baseline mt-4 mb-6 text-gray-800 ">
<Link
href="#"
className="ml-auto hidden md:block text-sm text-gray-500 underline"
>
Size Guide
</Link>
</div>
<div className="flex mb-4 text-sm font-medium">
<button
type="button"
className="py-2 px-4 bg-blue-700 hover:bg-blue-800 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full sm:w-1/4 transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 mx-auto rounded-lg "
>
Buy now
</button>
</div>
<p className="text-sm text-gray-500 text-center ">
Free shipping on all continental US orders.
</p>
</form>
</div>
)}
</Layout>
);
};
export default Authorization(Car);
This is where I fetch all cars and makes the id a parameter to the link address
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Image from "next/image";
import Layout from "#/components/Layout";
import Pagination from "#/components/Pagination";
import { GiBinoculars } from "react-icons/gi";
import { useGetAllCarsQuery } from "#/store/ReduxStore/getAllCarsApi";
import Link from "next/link";
const Market = () => {
//I use RTK Query to fetch the data, and It was successfully fetched
const { data, isLoading, error } = useGetAllCarsQuery();
return (
<Layout>
<div className="2xl:container 2xl:mx-auto">
<div className=" py-3 lg:px-20 md:px-6 px-4">
<div className=" flex justify-center mt-3 items-center">
<div className=" flex space-x-3 justify-center items-center">
<span className="bg-blue-800 px-4 py-2 rounded-md text-2xl text-white">
<GiBinoculars />
</span>
<input
type="search"
className="border-b-2 w-9/12 border-gray-700 -mb-3 leading-5 text-lg p-2 focus:outline-none"
placeholder="Search for cars here..."
/>
</div>
</div>
<hr className=" w-full bg-gray-200 my-6" />
<div className=" grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 lg:gap-y-12 lg:gap-x-8 sm:gap-y-10 sm:gap-x-6 gap-y-6 lg:mt-12 mt-10">
{data?.map((cars, i) => (
<Link
key={i}
href="/[id]"
as={`${cars._id}`}
//I insert the id here
className="relative"
passHref
>
<div>
<div className=" relative group">
<div className="caroverlay"></div>
<Image
width={600}
height={400}
className="rounded-md w-full"
src="/assets/images/d17.jpg"
alt="A girl Posing Img"
/>
<div className=" absolute bottom-0 p-8 w-full opacity-0 group-hover:opacity-100 z-20">
<button className="text-base font-bold leading-4 text-gray-600 hover:bg-gray-300 hover:text-gray-700 bg-white py-3 w-full">
Add to your garage
</button>
<button className=" bg-transparent text-base font-bold leading-4 border-2 hover:bg-gray-300 hover:text-gray-700 border-white py-3 w-full mt-2 text-white">
View Car
</button>
</div>
</div>
<p className=" text-xl leading-5 text-gray-600 md:mt-6 mt-4">
{cars.carName}
</p>
<p className=" font-semibold text-xl leading-5 text-gray-800 mt-4">
<span>$</span> {cars.carPrice}
</p>
</div>
</Link>
))}
</div>
{/* _______________________________________________________ */}
<Pagination />
{/* _______________________________________________________ */}
</div>
</div>
</Layout>
);
};
export default Market;
Here is my backend logic
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const router = require("express").Router();
const auth = require("../../middleware/auth");
const Car = require("../../Model/CarSchema");
router.get("/onecar/:id", auth, async (req, res) => {
try {
const car = await Car.findById(req.params.id);
res.status(200).json(car);
} catch (err) {
res.status(500).json({ msg: "Server Error" });
}
});
module.exports = router;

To access id in nextjs. I imported useRouter from next/router. Then I const router = useRouter(). Then const {id} = router.query

Warning: React Hook useEffect has a missing dependency: 'postImage'. Either include it or remove the dependency array while npm run build

In my project whenever i run npm run build command it through an warning message thet
Warning: React Hook useEffect has a missing dependency: 'postImage'. Either include it or remove the dependency array. react-hooks/exhaustive-deps.
How to fix this. Thanks in advance. Here is my complete code in which i get this message.
import Image from 'next/image';
import {useRef} from 'react';
import { useSession } from "next-auth/client";
import {ChatAltIcon,ThumbUpIcon,ShareIcon} from "#heroicons/react/outline";
import{LoveIcon,SadEmojiIcon} from "#heroicons/react/solid";
import InsertEmotionIcon from "#material-ui/icons/InsertEmoticon"
import SentimentVeryDissatisfiedIcon from "#material-ui/icons/SentimentVeryDissatisfied";
import FavoriteIcon from "#material-ui/icons/Favorite";
import MoodIcon from "#material-ui/icons/Mood";
import MoodBadIcon from "#material-ui/icons/MoodBad";
import firebase from 'firebase';
import { db, storage } from "../firebases";
import {useEffect,useState} from 'react';
import {useCollection} from "react-firebase-hooks/firestore";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
const Post=({id,name,message,email,timestamp,postImage})=>{
const commentRef=useRef(null);
const [isShown, setIsShown] = useState(false);
const [session]=useSession();
const[totalImage,setTotalImage]=useState(null);
const[load,setLoaded]=useState(false);
const likePost= async(e)=>{
let min =1;
let max = 50;
let postId = e.target.getAttribute("id");
console.log(postId)
let userId = (Math.floor(Math.random()*(max-min+1))+min);
let reaction = e.target.getAttribute("data-reaction");
let item = {postId,userId,reaction};
console.log(reaction);
let send = await fetch("http://localhost:8000/api/backend",{
method:'post',
body:JSON.stringify(item),
headers:{
"Content-Type":'application/json',
"Accept":'application/json'
},
}).then(response=>{
console.log(response)
})
}
const[user,loading,error] = useCollection(
db.collection("users").orderBy("joined_at","desc")
);
const submitComment=async(e)=>{
if (!commentRef.current.value) return;
else
{
console.log("comment")
}
}
const handleEvent=(e)=>{
if(e.detail==2){
setIsShown(true)
}
else{
setIsShown(false)
}
}
useEffect(()=>{
const remainingImage=totalImage > 6 ? totalImage-6:0;
},[remainingImage])
return (
<div className="flex flex-col">
<div className="p-5 bg-white mt-5 router-t-2xl shadow-sm">
<div className="flex items-center space-x-2">
<div>
<p className="font-medium">{name}</p>
{
timestamp? <p className="text-xs text-gray-40">{timestamp}</p> :(
<p className="text-xs text-gray-40">Loading...</p>
)
}
</div>
</div>
<p className="pt-4">{message}</p>
</div>
<div className="relative h-56 bg-white">
{/* <div className="grid-cols-3 p-20 space-y-2 lg:space-y-0 lg:grid lg:gap-3 lg:grid-rows-3"> */}
<Carousel>
{
useEffect(()=>{
postImage?.map((ele)=>{
return ele.map((urls)=>{
setTotalImage(urls.url.length);
return urls.url.map((url_,index)=>{
return <div key={index} className="w-full rounded"><Image src={url_} layout="fill" objectFit="cover"alt="image"/></div>
})
})
})
},[session])
}
{/* </div> */}
</Carousel>
</div>
{
isShown &&(
<div className="flex justify-start items-center bg-white" >
<div className=" items-center px-1 p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<FavoriteIcon onClick={()=>setIsShown(false)}className="text-red hover:text-red-500"style={{color:"red"}}></FavoriteIcon>
</div>
<div className=" items-center p-2 px-1 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<InsertEmotionIcon onClick={()=>setIsShown(false)}className="text-yellow hover:text-yellow-500" style={{color:"yellow"}}></InsertEmotionIcon>
</div>
<div className=" items-center p-2 px-1 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<SentimentVeryDissatisfiedIcon onClick={()=>setIsShown(false)} className="text-yellow hover:text-yellow-500"style={{color:"yellow"}}></SentimentVeryDissatisfiedIcon>
</div>
<div className="items-center p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<MoodIcon onClick={()=>setIsShown(false)} className="text-yellow hover:text-yellow-500" style={{color:"yellow"}}></MoodIcon>
</div>
<div className=" items-center px-1 -1 p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<MoodBadIcon onClick={()=>setIsShown(false)} className="text-yellow hover:text-yellow-500"style={{color:"yellow"}}></MoodBadIcon>
</div>
</div>
)
}
<div className="flex justify-between items-center bg-white shadow-md text-gray-700 border-t mt-5">
<div onDoubleClick={handleEvent} className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<ThumbUpIcon className="text-lg sm:text-base h-5 corsor-pointer"onClick={likePost} id={id} data-reaction="like" ></ThumbUpIcon>
<span className="cursor-pointer text-2xl text-gray-700">1223</span>
</div>
<div className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none">
<ChatAltIcon className="text-lg sm:text-base h-5 corsor-pointer"></ChatAltIcon>
<span className="cursor-pointer text-2xl text-gray-700">7777</span>
</div>
<div className="flex items-center hover:bg-gray-100 flex-grow justify-content p-2 rounded-xl corsor-pointer rounded-none rounded-bl-2xl">
<ShareIcon className="text-lg sm:text-base h-5 corsor-pointer"></ShareIcon>
<span className="cursor-pointer text-2xl text-gray-700">312</span>
</div>
</div>
<div className="flex space-x-4 p-4 py-1 items-center bg-white ">
{session ? <><Image src={session.user.image} height={40} width={40} layout="fixed"className="rounded-full"alt="image"/> </>:null
}
<form className="flex flex-1">
<input className="rounded-full h-12 bg-gray-100 flex-grow px-5 focus:outline-none" ref={commentRef} type="text"placeholder="Comment..."/>
<button hidden type="submit"onClick={submitComment}></button>
</form>
</div>
<div className="rounded-b-2xl bg-white flex text-gray-40 pb-2 pl-4 ">
<small className="mx-auto">Press enter to submit your comment.</small>
</div>
</div>
)
}
export default Post;

You can :
Use // eslint-disable-next-line react-hooks/exhaustive-deps on top of the line causing the error
Disable this eslint rule in .eslintrc.json
Simply include the missing variable in the useEffect dependency array ([session, postImage])