In this article, we will explore useEffect() hook and how it works without a dependency array. useEffect without a dependency array We use the useEffect() hook to run side effects when the component mounts, renders, re-renders, or unmounts. Dependency array affects when the useEffect() hook…
Strings are one of essential building blocks of web applications in React. We need strings for everything – from styling to custom error messages. Strings are normally static and have a beginning and an end, marked by single or double quotes. But sometimes we need…
You need onChange event handler to work with <select>, one of the most common input elements in React. onChange event handler to save selected value in the state React docs recommend to store input values in the state. To make this work, you need an…
React developers use <select> elements to let users choose one of multiple options and collect their input. You can, however, customize the <select> element to let users choose multiple options. In this article, we will explore how to implement multi-select dropdown in React. First, we’ll…
Sometimes web developers need to access the height of DOM elements in React. In this article, we will show the most readable and efficient way to do this while following best practices of React. Get height of an element in React There are three essential…
scrollIntoView() is a JavaScript method that scrolls to element it is called on. Since React is a JavaScript library, we can use it to scroll to element in React. Scroll to element on click Here’s an example where we scroll to element when user clicks…
We’re going to use react-router to redirect in React. Redirect to another page with useNavigate() hook react-router version 6 provides a useNavigate() hook, which returns a function that navigates to the path provided as a string argument.. Here’s an example: There are multiple ways to…
In this article, we will explore a number of different ways to get current URL in React. There are basically two ways: window.location to access current URL in React location is one of many properties on the window interface. Its value is an object that…
In this article, we will explain onKeyDown and discuss its practical use cases in React. We’ll also look at how to use onKeyDown with <input> elements and listen for specific keys like ‘Enter’. Handle onKeyDown event in React React internally supports onKeyDown event. Simply set…
Going to the previous page is essential part of browsing experience. In this article, we will explore how to implement a ‘go back’ feature in React. How ‘go back’ feature works Browsers keep track all URLs you visit when browsing a website. This information is…
