I have a component that receives a raw text and some extended information. It enhances the text with this information and returns an array of text snippets and enhanced Components. Initially, I created a function to do the transformation and…
I have a task that is simple (one line) in plain HTML/CSS/JS, but I can't find a simple and working method in React. I have a parent div, and it has two children. The second child is the meaningful content.…
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:…