You need to use useEffect hook to achieve this. const [counter, setCounter] = useState(0); const doSomething = () => { setCounter(123); } useEffect(() => { console.log(‘Do something after counter has changed’, counter); }, [counter]); If you want the useEffect callback to be ignored during the first initial render, then modify the code accordingly: import React, … Read more
First of all wrap the src in {} Then if using Webpack; Instead of: <img src={“./logo.jpeg”} /> You may need to use require: <img src={require(‘./logo.jpeg’)} /> Another option would be to first import the image as such: import logo from ‘./logo.jpeg’; // with import or … const logo = require(‘./logo.jpeg); // with require then plug … Read more
Passing an empty array as the second argument to useEffect makes it only run on mount and unmount, thus stopping any infinite loops. useEffect(() => { setIngredients({}); }, []); This was clarified to me in the blog post on React hooks at https://www.robinwieruch.de/react-hooks/
Issue <BrowserRouter> <Switch> {authLogin ? ( <> <Route path=”/dashboard” component={Dashboard} exact /> <Route exact path=”/About” component={About} /> </> ) : ( <Route path=”/” component={Login} exact /> )} <Route component={PageNotFound} /> </Switch> </BrowserRouter> The Switch doesn’t handle rendering anything other than Route and Render components. If you want to “nest” like this then you need to … Read more
You should invoke your second function as a callback to setState, as setState happens asynchronously. Something like: this.setState({pencil:!this.state.pencil}, myFunction) However in your case since you want that function called with a parameter you’re going to have to get a bit more creative, and perhaps create your own function that calls the function in the props: … Read more
In this example, nothing really. The exact param comes into play when you have multiple paths that have similar names: For example, imagine we had a Users component that displayed a list of users. We also have a CreateUser component that is used to create users. The url for CreateUsers should be nested under Users. … Read more
There are multiple ways of doing this, since state update is a async operation, so to update the state object, we need to use updater function with setState. 1- Simplest one: First create a copy of jasper then do the changes in that: this.setState(prevState => { let jasper = Object.assign({}, prevState.jasper); // creating copy of … Read more
There is only one reason when one needs to pass props to super(): When you want to access this.props in constructor. Passing: class MyComponent extends React.Component { constructor(props) { super(props) console.log(this.props) // -> { icon: ‘home’, … } } } Not passing: class MyComponent extends React.Component { constructor(props) { super() console.log(this.props) // -> undefined // … Read more
React Router v6, using hooks In react-router-dom v6 there’s a new hook named useSearchParams. So with const [searchParams, setSearchParams] = useSearchParams(); searchParams.get(“__firebase_request_key”) you will get “blablabla”. Note, that searchParams is an instance of URLSearchParams, which also implements an iterator, e.g. for using Object.fromEntries etc. React Router v4/v5, without hooks, generic React Router v4 does not … Read more
You can use arrow function to bind you functions. You need to bind you functions both in child as well as parent components. Parent: export default class Parent extends Component { constructor(props) { super(props); this.state = { code: ” }; } setCodeChange = (newCode) => { this.setState({code: newCode}); } login = () => { if … Read more