i have an issue on my project i’am working on, i have a SIDEBAR and a TOPHEADER(NAVBAR).., now the issue starts when i want to have a FIXED SIDEBAR without it obscuring other page elements like TopHeader/Navbar and body content to the left side of the page.. tried adding ml-20 on topHeader div but that …
Tag: reactjs
I can’t import emotion js style with dynamic variable
I have a webpage that looks like this: This is my _app.tsx file: And this is shared/styles.js: Notice that blueOnBlack is an attempt to put the Futuristic Sci-Fi UI Web Framework style into its own importable variable. The problem is that when I put blueOnBlack into the _app.tsx as the style for the Futuristi…
Persist the login state in Next js using localstorage
I’m writing an authentication application in Next Js (v12.2.5). The application also uses React (v18.2.0). The problem is with persisting the authentication state. When the browser is refreshed, the login session is killed. Why is this happening even though I am getting and setting the token in the loca…
how to convert a JSON API returns an object to an array for using .map()
I am trying redux-thunk for the first time Hence working on a simple project the thunk uses the API and displays the data on the screen but the API is returning a JSON object ,to display the titles on the screen I need to use the .map() function to map through the object, but the object doesn’t allow us…
How can I create conditions on multiple array objects to handle errors in React?
I have an array object called containtemps. It has a property value called modDate. I extract the boolean value of the temperror variable by comparing the time based on the modDate property value among several objects in containtemps. So, by putting temperror variables 1, 2, and 3 in the error variable, if an…
Use event.target.name instead of hardcoded value when setting state in nested array
I have a nested array i add dynamically to my state and therefore i dont know the key/name of the nested array and I can not give the key/name of the nested array when i need to add, update, iterate or remove somethings in the array. An example is the function addClick The comment contains the way i am thinki…
Import dynamically external JavaScript module in React component
I have a Javascript module that looks like: I need to import this script in React. This is what I tried: Defined a useScript method: Use it to load the script in React component: This gives me the error: Note, that if I remove export from the JS file then it works. However, I need the export and not sure
Unable to find draggable with id x – reactjs – react-beautiful-dnd
having this issue with react-beautiful-dnd on my reactjs page. I’ve gotten my code from here with some minor changes to the content of each “dragable”/”row” Issue Update: This issue happens when I try to drag my row Data questions is equal to UI Code Answer Solution / Fix All I n…
React returns several errors when I import fetch
I am building a simple app using React. The app works fine without any issue until I import fetch. Here is the code I ran: App.js Some of the errors returned are: What I tried to resolve the errors are: Trying to substitute fetch with axios. But it seems to return the same errors. Adding experiments: { topLev…
SVG overlapping shapes with Recharts
I am using Recharts to create a simple pie chart. My issue likely stems from the fact the entire thing is SVG-based. I would like to have a selected pie slice change color (both fill and stroke). So I do the following: Then render with: And unfortunately, on hovering the First Slice, what I see is this: Howev…