<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> <div classname="div-5"></div> </div> When the parent is clicked, it should only call the callback if for example, the click did not include div-4, div-5 etc. How to implement this in…
This is the private route component, and before users access the page I need to check if they are logged in (if their token is valid) import { authService } from '../authservice/AuthService'; export default function PrivateRoute({ children }: { children:…
I am building a To Do list project using React and TypeScript. In the process of refactoring my code and breaking up different divs (Active tasks, Done tasks, All tasks) into separate files within my component folder, my project is…
in App.js: return ( <BrowserRouter basename="/"> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/home" element={<Home />} /> <Route exact path="/header" element={<div><Header links={"/"}/><Me /><Footer /></div>} /> <Route exact path="/me" element={<div><Header links={"/"}/><Me /><Footer /></div>} /> <Route exact path="/About" element={<div><Header links={"/"}/>…
I have a an Axios promise being called from an asyncThunk. I am using the redux toolkit to capture the responses. However, I do not know of a way to return the actual response of the promise call to the…
I'm working on a React project and I'm trying to make my header section more mobile-responsive. Currently, I have three links (Home, About, and Login) in the left section, a centered logo/title, and search and cart buttons on the right…
I have code below. // this is a function which pass to onClick props of a button const handleDialogClick = () => { setDialogOpen({ title: "Please Choose Language You Want", content: ( <TextField label="Text" select fullWidth InputLabelProps={{ shrink: true }}…
I have a table in React. The table gets data from the server. I need to do one thing when clicking on the field in the table. I have to update the information then. My table looks like this <div>…
In an app I am building a custom range slider. I have a state that maintains the current value and also a prop that is exposes a callback triggered on change of this internal state. Below is how I am…
I'm just trying to build a frontend builder React app. Everything goes as expected but not one. const [displayContent, setDisplayContent] = useState( props.contentInside.html ); <button onClick={() => { props.changeLanguage("HTML"); setDisplayContent(props.contentInside.html); }} > HTML </button> <button onClick={() => { props.changeLanguage("CSS"); setDisplayContent(props.contentInside.css);…