Category "reactjs"

Fetch runs in a loop

I am fetching data in my react component import React, { useState, useEffect } from 'react'; import { fetchBookData } from './bookData'; import "./App.css"; ex

Property 'children' does not exist on type after assigning type React.FC to component

I have assigned type React.FC to my component but I still dont't have access to the children props. I get this error "Property 'children' does not exist on type

NextJS Global Variable with Assignment

I'm new to NextJS, and trying to figure out, how to create a global variable that I could assign a different value anytime. Could someone give a simple example?

Which one is more efficient on saving rendering? (React)

I am wondering two cases, which is better for writing? case 1 import * as React from 'react'; const TestComponent:React.FC = () => { const [count, setC

How Do I Call An Authenticated HTTP Trigger Google Cloud Function Via A Next.js (with Typescript) App?

I created a Google Cloud Platform account, and made a simple hello_world type Python "Cloud Function" that just spits out some simple text. I made this function

How to cleanup this fetchEvent function used in a useEffect hook? [duplicate]

useEffect(() => { const fetchData = async () => { await fetchEventSource(`/weborders/${agentId}/web_stream`, { method

React-intl with a custom react components library

I'm having a hard time to create a react library that supports translations. Let's say I have this structure components |- Button1 |- Button1.tsx |- ind

Vector layer being drawn before the Openlayers map?

this is my code for the drawing const drawLines = () => { const points = [[-89.8802, 32.5804], [44.419834, -97.568073]]; const featureLine = new F

Should we be using the unsubscribe method returned by Auth.onAuthStateChanged() in firebase to clean up memoery leaks?

Here is my code: import React, {useState, useRef, useEffect} from 'react'; import { getAuth, onAuthStateChanged } from 'firebase/auth'; import { useNavigate } f

Change nested object with one function in react

I have this kind of object where I want to change the Ethereum value for example; const [reportData, setReportData] = useState({ nameOrganization: "test5",

Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. (React, , firebase, JWT))

When I try to implement a secure login system in React application with firebase using JSON Web Token (JWT) I am getting this error: Acces to XMLHttpRequest at

Uncaught TypeError: Cannot read properties of undefined reading pathname

I am getting this error while running the below code import React from 'react'; import { Link } from 'react-router-dom'; const DanimProduct = () => { re

What is the status of the 'default props rerender' trap in React?

I'm looking for a canonical reference to how this has been dealt with. If I have a component that looks like this: const MyComponent = ({ value = [] }) => {

How to use useContext correctly,

I want to take out the function and state globally, because the function and state use the global header. But how can my MainPage page get this data? I know tha

React: React-Bootstrap Collapse is not working

Started using React-Bootstrap today and I want to make a collapsable card. Using Collapse component but it's not working. Any tips? My code: import { RiArrowDow

Redux toolkit filter() not working when wanting to display new array at the same time

I am currently building a clothing shop in which you can add products to the cart, and delete each one of them as you like and it makes the cart re-render and d

Typing custom event with typescript

I'm asking for a suggest on how to type correctly the schema for how an EventObject should be, including what's inside the "extendedProps" key. As of now I've d

How would I get the data I need from this array?

I am trying to get all the data from my firebase firestore and put it into a javascript react table but I am having a difficult time. async function GetAllDataO

Redux & TypeScript: Property 'X' is missing in type 'DefaultRootState' - but the property is declared in Interface

Here's my Interface which I'm using with mapStateToProps: export interface IStore { cache?: any; dataManager?: IUR; userPrefs: IUP; fingerprintModal?: I

Bundle CSS in publishable NX React library

I created a publishable React library that contains some custom styles. When I use this library (component) within a demo application in the NX project, I do no