I have the following CSS: .subtask { background: var(--offwhite-color); margin: 0.3em; padding: .625em 1.25em; width: 60%; margin-left: .9em; } .subtask.highlight { border-left: .3em solid var(--secondary-color); } where .subtask.highlight is only rendered onClick(). However, this extends the width past the fixed…
i have an array below const sampleResponse = [ { benefitTypeCode: 'HE', benefitTypeValue: 'HEALTH', }, { benefitTypeCode: 'DE', benefitTypeValue: 'DEATH', }, ]; how to manipulate array string into our desire string my goals const sampleResponse = [ { benefitTypeCode: 'HE',…
I have the following custom hook that basically fetches data from a smart contract: export const usePoolLength = () => { const [length, setLength] = useState(0); const _getPoolLength = useCallback(async () => { const poolLength = await getPoolLength(); setLength(poolLength); },…
I'm stuck creating a dark mode toggle feature for my web app. I'm using NextJS with Material UI. I've tried to create a React context which contains a useState and have a switch component change the context. theme.tsx This is…
I am creating a Todo List app saving data in localstorage but when i reaload the page, my components renders twice creating empty data and replacing by the previous tasks saved in localstorage. This is my main file: main.jsx import…
I am trying to update an array within the stories array in my state. I want the payload object to come to the top of the stories array containing it. I tried the method below but it keeps on adding…
I have a contact form and i want to clear the input fields and textarea after my submit function is triggered. How can i achieve this by managing the states? This is my Form component: Where the initial state of…
I'm slightly baffled on why I'm unable to generate icons dynamically with the way I've setup my React component. I've tried using both specific imports for each icon and importing them all at once, however, I keep receiving the same…
I have a react app that Takes an array of GIF urls Renders the first one of the array Allows the user to click on "Next/Back" to navigate through the array and render the Next/Previous GIF. Under the hood, when…
I'm feeling stupid cause i did the entire site but I'm stuck trying to make the navlinks scroll in the components of the same page. My App.js import Header from './components/Header'; import Intro from './components/Intro'; import Experience from './components/Experience'; import…