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
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
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
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
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
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
We need direct access to the DOM elements to focus on the input fields. Here, I make use of the hook useRef to achieve this. Let us see in action. First of all, I initiated a constant with useRef hook. Then, I added our initiated value as a ref to one of my input field. … Read more
Here I am going to explain one of the best and common practices of handling multiple inputs with React Hooks. It’s possible to handle all inputs of a form by using a single state and onChange function. Let’s see in action. First of all, we can initialize a state as an object with all input … Read more
This post is for beginners who struggle to understand the data flow of React JS. You can pass data from a parent component to the child component as props. Props are like a variable which you can pass from one component to another. First of all, you can create a child component. Child Component Now … Read more
Here, I will show you how to use material icons in your react app. First of all, you need to install two packages. npm install @material-ui/core npm install @material-ui/icons Now it’s the time for you to select an icon from here. I have given below an example of using AccessAlarmIcon from the list. You can … Read more
