I have a dynamic route in my NextJS app /team/[id] .... When the page loads it goes off to the API and checks the ID of the team and then returns the information, if the ID doesn't exist on the…
I can't figure out why React is re-rendering my component but not re-running the useEffect hooks. I was playing around with React hooks using this code https://codesandbox.io/s/solitary-wave-s4wt3r?file=/src/index.js import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom";…
I am working on a Next.js application with an app directory structure. In my application, I have a page called itemDetail that displays the details of a specific item. However, I want to customize the URL so that it looks…
i have a list of divs and buttons associated with them. when i click on any one of the divs, i want only ONE button, which is associated with that div to be displayed. however with the code i've written…
I have App file where i have function to filter list and i every section of the page on components on components. So i want to pass showActive, showAll and other functions to TaskControl to Button and assign to onClick.…
https://codesandbox.io/s/drag-find-y-f2jltf I know what I want to accomplish but I don't know how to go about it. You can see in my CodeSandbox when you drag the balls towards the target element (the box with white border) the X always…
There is a button that is disabled after 3 clicks. Counter is preserved (1/3 2/3 or 0/3) when I refresh the page. But I can't do the same thing for disabled button. I don't want to reset setTimeout. I want…
I have a grid with multiple cells that the user can select. Depending on the cells the user selects on the grid, I show different actions at the bottom of the page. The way I’m implementing this right now is…
I am calling setState within useEffect and it's triggering infinitely. I'm having a hard time understanding why. The problem is with the third useEffect that is dependent on picked. import GameCSS from './game.module.css' import Dog from "./dog/dog" import { useState,…
I have a function that merges 2 objects. But I want this function to be executed before executing the component function piecesPlacement() { // placement each piece in specific house boardHousesArray.forEach((housesItem) => { if (!housesItem.isEmpty) { allPieces.forEach((piecesItem) => { if…