I have this react App structure. Some components are hidden based on the content of a local storage. import React from "react"; import { BrowserRouter as Router } from "react-router-dom"; import AppRoutes from "./Routes"; import NavBar from "./components/NavBar"; const App…
I'm trying to get the width of an element but I get an error when I invoke a function from the container component Sidebar: onClick={() => setActiveComponent(sidebarViews[1])}. Why is this error occurring? Sidebar.tsx function Sidebar() { const [activeComponent, setActiveComponent] =…
I have this code for a sidebar, it has to render the 3 sections, "laboratorio", "sucursales" and "recursos humanos", the submenu of each one is taken from the sseccion of each const. However, I don't know how to render the…
I found that prettier will wrap my jsx attributes which has more than one template literal to new line. For examples in my jsx file: // before formatted and expected result <DemoFrame html={`${demoPath}/frame1/index.html`} css={`${demoPath}/frame1/index.min.css`} /> // formatted <DemoFrame html={`${demoPath}/frame1/index.html`} css={`…
This is my react component const ButtonComponent = ({ children, onClick, disabled, className = "" }) => { console.log("class name is ", className); const buttonClassName = ` bg-green-700 flex hover:bg-green-500 transition duration-300 ease-in-out text-white h-auto text-base p-2 rounded-[5px] m-2 ${…
I'm learning React.js and I'm creating a demo. I have created a Login page. Now I want to develop the functionality that if I'm using admin's credentials then I should change the current page layout to listing of employees. And…
What specific syntax needs to be changed in the code below in order for the value returned by the currentSession() function to correctly set the html that is rendered to the user in the web browser? Specifically, what needs to…
The code below is throwing errors, specifically the part that has asterisks around it. import CSS from "csstype"; const circleAroundNumber: CSS.Properties = { borderRadius: "50%", width: "70px", height: "70px", padding: "8px", background: "#fff", borderBlockWidth: "2px", borderBlockColor: "black", textAlign: "center", fontSize:…
How can I make my currentProgresstext follow the progress bar, for now it seems that setting progressWidth to 100 makes the text appear on the left (following the progress bar). And the progress bar's text dissapears when the progressWidth is…
I have the following useEffect hook in a react component that fetches data from a api. http is an axios instance. I have a react use State hook const [inputsData, setInputsData] = useState(false);. useEffect(() => { if (active.id) { http.get(`/stock/${title}/${active.id}`).then((response)…