I have the following code in .jsx component, <div className={type === "travellist" ? "headerContainer listmode" : "headerContainer"}> In .scss how do I use the listmode for the class headerContainer? For example: .headerContainer.listmode{ margin: 20px 0px 40px 0px; } or .headerContainer{…
I am trying to create a useCustomState hook which I want to work exactly in the same way as useState hook. I wrote the below code but the setState is not working. import React from 'react' import ReactDOM from 'react-dom'…
I've created a custom progress bar component in React that uses a gradient background. To achieve this effect, I'm using the CSS mask property. The progress bar works perfectly in Firefox, but I'm encountering an issue in Chrome. The mask…
I was experimenting with react. and used setState as shown below. import {useState} from 'react'; export default function App() { const [state,setState]=useState([]); const fetchApi= async()=>{ return fetch('https://jsonplaceholder.typicode.com/posts') .then(response=>response.json()) .then(data=>{console.log(data); return data}) .catch(err=>console.log(err)) } setState(fetchApi()); return ( <div> </div> ); }…
Let's say I have something like: const exampleFunction = () => { const fetchActions = someArray.map(() => { dispatch(action()).then(response => { if (response?.data) { dispatch(subAction({response: response.data})) } }) }) return Promise.all(fetchActions) .then(()=> dispatch(finalAction())) } My problem is that when I…
I have displayed the images in a grid using the and components of MaterialUI. I want another functionality that when a particular image is selected/clicked on, from the displayed Image grid, i need a border to be displayed around the…
When the HandlePayNow function is called, it executes all of its intended functionality but then crashes the system. It sends the order data to the API, the API logs it and returns a success message, the function gets this success…
Is it possible to assign the hook return function to a render map in React? The following example includes the socialAuthMethodsMap map with the onClick parameter. I want to assign the signInWithApple function from useFirebaseAuth hook, but it breaks the…
I have following code const useCreateSupplier = (createSupplierCommand: CreateSupplierCommand) => { return useMutation({ mutationFn: () => axiosClient .post("/supplier", { createSupplierCommand }) .then((res: AxiosResponse) => res.data), onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: [queries.get_suppliers], }); }, }); }; const CreateSupplierForm…
I am new to Reactjs,I have created a navigation/header page but active class is not working properly when I click on navigation link. I am using navlink tag here with dynamic class. Problem - All the links are showing active…