If you only want to run the function given to useEffect after the initial render, you can give it an empty array as second argument. function MyComponent() { useEffect(() => { loadDataOnlyOnce(); }, []); return <div> {/* … */} </div>; }
Using React Hooks: You can define a custom Hook that listens to the window resize event, something like this: import React, { useLayoutEffect, useState } from ‘react’; function useWindowSize() { const [size, setSize] = useState([0, 0]); useLayoutEffect(() => { function updateSize() { setSize([window.innerWidth, window.innerHeight]); } window.addEventListener(‘resize’, updateSize); updateSize(); return () => window.removeEventListener(‘resize’, updateSize); }, []); … Read more
The curly braces inside backgroundImage property are wrong. Probably you are using webpack along with image files loader, so Background should be already a String: backgroundImage: “url(” + Background + “)” You can also use ES6 string templates as below to achieve the same effect: backgroundImage: `url(${Background})`
You can use the history methods outside of your components. Try by the following way. First, create a history object used the history package: // src/history.js import { createBrowserHistory } from ‘history’; export default createBrowserHistory(); Then wrap it in <Router> (please note, you should use import { Router } instead of import { BrowserRouter as … Read more
There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is. There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn’t standard JavaScript one could argue that anything that is not “plain” … Read more
I was having this error and it turned out to be that I was unintentionally including an Object in my JSX code that I had expected to be a string value: return ( <BreadcrumbItem href={routeString}> {breadcrumbElement} </BreadcrumbItem> ) breadcrumbElement used to be a string but due to a refactor had become an Object. Unfortunately, React’s … Read more
I believe my input is controlled since it has a value. For an input to be controlled, its value must correspond to that of a state variable. That condition is not initially met in your example because this.state.name is not initially set. Therefore, the input is initially uncontrolled. Once the onChange handler is triggered for … Read more
For child-parent communication you should pass a function setting the state from parent to child, like this class Parent extends React.Component { constructor(props) { super(props) this.handler = this.handler.bind(this) } handler() { this.setState({ someVar: ‘some value’ }) } render() { return <Child handler = {this.handler} /> } } class Child extends React.Component { render() { return … Read more
In react-router-dom v6, “Switch” is replaced by routes “Routes”. You need to update the import from import { Switch, Route } from “react-router-dom”; to import { Routes ,Route } from ‘react-router-dom’; You also need to update the Route declaration from <Route path=”/” component={Home} /> to <Route path=”https://stackoverflow.com/” element={<Home/>} /> In react-router-dom, you also do not … Read more
What is the difference between JSX.Element, ReactNode and ReactElement? A ReactElement is an object with a type and props. type Key = string | number interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> { type: T; props: P; key: Key | null; } A ReactNode is a ReactElement, a ReactFragment, … Read more