my usesate why rendering two times? I used [] at the end of the usestate so it should render once but it fetching data two times which gives me a duplicate render. useEffect(() => { const socket = io("http://localhost:3001"); let…
I have set the font-family in GlobalStyle. However I want to use another font-family and additional another font-style in one component. It somehow does not work to set it like below. const GlobalStyle = createGlobalStyle` body { font-family: Montserrat; ...…
I am working on a application based on false i have to display end date. my schema: export const experienceSchema = yup.object().shape({ experience: yup.string().required(), job_title: yup.string().required(), category: yup.string().required(), current_working_status: yup.string().required(), join_date: yup.date().required(), end_date: yup.date().notRequired().when("current_working_status", { is: "false", then: yup.date().required("Please enter…
I wanted to split the API into two parts, but the provided tag endpoint didn't refetch itself, when the invalidatesTag endpoint at the other part was called. BaseApi: import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; export const baseApi = createApi({…
So, I have a useState that contains data like this: const [orderData, setOrderData] = useState({ demoData1: '', demoData2: '', demoData3: '', demoArrayData: [{itemName: '', itemNumber: ''}] }); I have an onClick function that I would like to use to update…
I need to reload a GIF image (CHECKMARK_ANIMATION_ICON is the source) to start the gif animation every 12 seconds or every time the activeIndex is changing. This is my code: const reloadImgSource = (imgSource) => { setTimeout(() => { setImgSource("");…
I have been working on an SPA with React 18 and The Movie Database (TMDB) API. I am currently working on a search functionality. In the Searchbox.jsx component I have: import { ReactComponent as Magnifier } from '../../icons/magnifier.svg'; import {…
we are working with a SPFX webpart, pulling SP site Lists and list template. please tack a look the output we are getting Here is the piece of code to the above output. public render(): React.ReactElement<IGetSpListsProps> { return ( <div>…
Below is my Form looks like in return section: <Form > <ListGroup > <ListGroup.Item className="text-start" > <div> <Form.Check type="radio" id="0" name="answer" label={questionsJSON.questions[num].answers[0]} value={questionsJSON.questions[num].answers[0]} onChange={e => setSelectedAnswer(e.target.value)} {...{ selectedAnswer } != null ? "checked" : null} /> </div> </ListGroup.Item> <ListGroup.Item className="text-start">…
In my parent component(App.js) i am passing a function as a prop to the child: import React from "react"; import Win from "./components/Win" function App() { const [squares, setSquares] = React.useState(dices) const [allSame, setAllSame] = React.useState(false) function Reset() { console.log("yes")…