I am trying to set a state in a component and transfer that list from one component to another. But getting console error as List.map() is not a function! I am trying to get webpage as enter image description here…
React Routing seems way overly complicated, I have authentication through Firebase and need the routes wrapped with the <AuthProvider> but I get this error that it's not a part of the <Route> component. I can't find a work around for…
I'm having a bit of trouble figuring out how to handle generic types when receiving component properties in Typescript and React. For example, here I am trying to make sure that the type of options in the columns property of…
I'm trying to create a smooth zoom in my react-leaflet project. I know that this is doable with vanilla leaflet as said in this post, with smoothWheelZoom, but knowing that vanilla leaflet does not goes well with React, I'm wondering…
I'm stuck with a problem whereby I need to show only records that are active and hide inactive ones from a REST API call that I'm making. If all records are inactive, just show only single message saying "No Records…
I tried to change the font weight for the buttons within a navbar, but I don't know why does it go wrong every time. Firstly, I created a separate css file where I tried to set the font weight to…
all exports/imports work fine. MainLayout.js file the only file in layout : the sidebar is fixed in all pages except Login, Register and Not Found. in folder layout there is just MainLayout.js const MainLayout = (props) => { return (…
let inner=useRef(); let inner_exit=useRef(); useEffect(()=>{ inner.current=document.querySelectorAll('.inner'); inner_exit.current=document.querySelectorAll('.exit'); inner_exit.current?.[0].addEventListener("click",toogleInner); inner.current?.[0].addEventListener("click",(e)=>{ if(e.target === e.currentTarget) toogleInner(); }); },) const toogleInner = ()=>{ inner.current?.[0].classList.toggle('hide'); }; return ( <div className='inner'> <div className='contentSign'> <div className='form'> <h2>Đăng nhập</h2> <span className='exit'>X</span> </div> </div> ) }; I want when…
I am running a function when the user clicks a button, this function updates my useState and adds an array into it as data. This data later on is passed into another webpage where the array objects are displayed in…
"use client"; const Component = ({ className }) => { const [open, setOpen] = useState(false); const [showNewOrganizationDialog, setShowNewOrganizationDialog] = useState(false); return ( <Dialog open={showNewOrganizationDialog} onOpenChange={setShowNewOrganizationDialog} > <Popover open={open} onOpenChange={setOpen}> <PopoverTrigger asChild>...</PopoverTrigger> <PopoverContent className="w-[200px] p-0">...</PopoverContent> </Popover> <DialogContent>...</DialogContent> </Dialog> ); }; This…