I'm initializing firebase when the react app runs. Since I'm calling initFirebase on component mount, it should be called only once. But in my console, I see "Initialized firebase app" twice. Why is the function runnning twice? The relevant code:…
Here's the relevant code snippet where the error is occurring: import React from 'react'; const MyComponent = ({ items }) => { return ( <ul> {items.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; export default MyComponent; I'm passing an…
I translate component to hook code and I have difference between both. (note that the Refresher is callback the fetchApi to refresh data) export default class myComponent extends Component { constructor(props) { super(props); this.state = { test: false }; }…
I am having the following code: const [FishClass, setFishClass] = useState({}); //... useEffect(() => { axios.get("/api/v1/class/" + params.id).then( (response) => { console.log("axios call: " + response.data); if (Array.isArray(response.data)) { setFishClass(response.data[0]); } else { setFishClass(response.data); } }, (error) => { console.log(error);…
I have one page that has a search bar and under that bar I have 6 links that lead to some other pages. Every link is a square made of image and paragraph. I want to type something in the…
I am building a project using typescript and react, with Redux Toolkit. Now I find that I need to write sometime the same selectors again and again. for example const userRole = useAppSelector((state)=> state.user.role), I want a method to write…
Error: react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such…
I want to create a crud app with react and grapgql(my problem is for update section). I have a list of todos and when I click on edit button it is gone to edit page. problem: I want to see…
There is a trend saying that devs should get rid of useEffect as much as possible in React v18. React documentation says An Effect lets you keep your component synchronized with some external system (like a chat service). External system…
I have a row of thumbnails that are supposed to play a video when I hover over them, and stop when I mouse out of the thumbnail. As of right now, only the last thumbnail plays it's video when I…