Category: React

  • How to update React Context from inside a child component?

    React Context is a powerful feature that allows us to share data across components without having to pass props through multiple levels. However, one common challenge that developers face is how to update React Context from inside a child component. In this blog post, we will explore two solutions to this problem. Solution 1: Using…

  • How to dynamically add a class to manual class names?

    When working with JavaScript, there may be situations where you need to dynamically add a class to elements that already have manual class names assigned to them. This can be useful when you want to apply additional styling or functionality to specific elements based on certain conditions. Fortunately, there are multiple ways to achieve this.…

  • Updating state on props change in React Form

    Updating state on props change in React Form React is a popular JavaScript library for building user interfaces. One common scenario in React development is updating the state of a component when its props change. This is especially useful in forms, where we want to keep the form fields in sync with the data passed…

  • ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)

    ReactJS and Typescript: Refers to a value, but is being used as a type here (TS2749) ReactJS and Typescript are two popular technologies used in web development. ReactJS is a JavaScript library for building user interfaces, while Typescript is a typed superset of JavaScript that adds static typing to the language. When using ReactJS with…

  • How to use callback with useState hook in react

    How to use callback with useState hook in React React’s useState hook is a powerful tool for managing state in functional components. It allows us to declare state variables and update them within the functional component’s body. However, sometimes we may need to perform additional logic after the state has been updated. This is where…

  • ReactJS – Get Height of an element

    ReactJS – Get Height of an Element When working with ReactJS, there may be times when you need to retrieve the height of an element. Whether you want to dynamically adjust the layout of your components or perform calculations based on the size of an element, knowing how to get the height can be quite…

  • Await is a reserved word error inside async function

    Await is a reserved word error inside async function If you have encountered the “Await is a reserved word” error while working with JavaScript’s async functions, you are not alone. This error occurs when you try to use the keyword “await” outside of an async function. In this blog post, we will explore the reasons…

  • In useEffect, what’s the difference between providing no dependency array and an empty one?

    When working with React and its useEffect hook, you may come across the scenario where you need to specify a dependency array. This array tells React which variables or values the effect depends on, so that it can re-run the effect whenever any of those dependencies change. However, there are two options when it comes…

  • What does it mean when they say React is XSS protected?

    React is a popular JavaScript library that is widely used for building user interfaces. One of the key features of React is its built-in protection against cross-site scripting (XSS) attacks. But what exactly does it mean when they say React is XSS protected? In this article, we will explore the concept of XSS attacks, understand…

  • How to manually invoke Link in React-router?

    How to manually invoke Link in React-router? React-router is a popular library for handling routing in React applications. It provides a Link component that allows you to navigate between different routes. However, there may be situations where you need to manually invoke a Link programmatically, such as when you want to trigger a navigation based…