HTML to PDF converter for your React Application

Here, I’ll show you how to use jsPDF (html to pdf converter) in your React application which supports all modern CSS including flexbox. Consider the below one as your sample App component. Now, install jspdf library by using the below command. Then, you can import jspdf in the App component. Now, I’m going to replace … Read more

Redirect to an External Link from your React Application

You can make use of window object for redirecting to an external URL from your application. Let us assume that you want to redirect users to a specific URL that has typed by that user. Consider the example given below. Here, we are replacing the current URL with the input received from the user. We … Read more

Input Field is not Editable – React JS Fix

If the value of your input field is not changing or editable, then you can try the following solution. This may happen when your field doesn’t have an onChange event or the value attribute is not updating. Consider the below one as your sample component. Since the value attribute is not updating, it’s not possible … Read more

Page keeps Refreshing on Button Click – React JS Fix

The default behavior of a button inside the form is to submit the data. Hence, it keeps refreshing in our React application and our onClick function doesn’t work normally. We can fix this issue by preventing the default behavior of the button and adding our custom logic to be executed on the onClick event. Let’s … Read more

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 … Read more

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 … Read more

ComponentWillUnmount with React Hooks

Since we don’t have any lifecycle methods in React functional components, we will make use of the hook useEffect to achieve the same behavior. You can also check my other blog posts where you can do componentDidMount and componentDidUpdate with hooks. Basically, componentWillUnmount is used to do something just before the component is destroyed. Mostly, … Read more

ComponentDidUpdate with React Hooks

We can make use of the hook useEffect in order to achieve the same behavior of componentDidUpdate in the class components. useEffect hook receives a callback function that will execute when the component is mounted and whenever it updates. You can also check my other blog posts where you can do componentDidMount and componentWillUnmount with hooks. Let’s … Read more

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. … Read more