history.push is only changing the URL, not rendering component – React fix

This is one of the common issues caused while configuring react routing. I assume that you added the history object to your router using createBrowserHistory and still getting this issue. Here, I will explain how to fix this issue of history. Consider the below one as your router component. If you configure the router component…

How to Pass Data from Child Component to Parent Component with React?

I think this is one of the most asked questions when you are on the learning path to React. Since React is unidirectional, it’s not possible to pass data from child component to parent component directly. It doesn’t mean that your child component can’t communicate with the parent component. You can still achieve this by…

ComponentDidMount with React Hooks

We will be using the useEffect hook in the functional component to achieve the same behavior of componentDidMount in the class components. You can also check my other blog posts where you can do componentDidUpdate and componentWillUnmount with hooks. Let’s go through an example of componentDidMount. First, we will be importing useEffect hook from the react library….

TypeError: Cannot read property ‘location’ of undefined – React JS Error Fix

This is one of the common errors caused while doing React routing. This happens when the browser tries to access the history object. You can fix this by adding a history object to routing. The full error is given below. TypeError: Cannot read property ‘location’ of undefined Error Fix You can fix this by using…

How to Add OnClick Function to Material-UI Button in React

As you know, material-ui is one of the most popular react component library which implements Google’s material design. When you are looking the props for Button in material-ui you may notice that onClick is missing. Yes, you are right, material-ui has not documented common react events. You can add onClick function to material-ui Button as…