Category : use-effect

I’m writing my first react-typescript application. Currently, I’m struggling with keeping state persistent on page refresh. This my code to fetch user information and setStatus and setAuth. const [status, setStatus] = useState(404) const [auth, setAuth] = useState(false) useEffect(() => { ( async () => { try { const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/user`, { headers: {‘Content-Type’: ..

Read more

I have a homepage component that fetches reservations after it has rendered like this const Index = ({ …rest }) => { const [message, setMessage] = useState(null); const [items, setItems] = useState(null); useEffect(() => { fetch(‘reservation/getAll’) .then(res => res.json()) .then((res) => { setItems(res.result) }); }, []); when the user wants to edit a reservation he ..

Read more

I have 4 components: App, CatalogList, CatalogPreview, CatalogDetail App is the parent component and I have these state values: const [catalog, setCatalog] = useState({ id: 1, name: ‘Electronics’ }) const [isModalOpen, setIsModalOpen] = useState(false) CatalogList and CatalogPreview components receive the above state values as props along with their setter functions. Inside CatalogList.js: I have a ..

Read more

I have a hook that executes the function passed to it when someone leaves the current page, or when they leave the website const useOnPageLeave = (handler) => { useEffect(() => { window.onbeforeunload = undefined; window.addEventListener(‘beforeunload’, (event) => { //When they leave the site event.preventDefault(); // Cancel the event as stated by the standard. handler(); ..

Read more

Here’s the issue: I have a component that is meant to be the same structure for ≈ 25 different items/pages. So, I do what anyone would when trying to use React, and I am passing dynamic URL parameters into my API request (pictured below). const [{ items, isLoading, isError }] = useDataApi( `http://localhost:5000/api/teams/topspending/${params.team}`, [], params.team); ..

Read more