react js short Archives - Learn ReactJS & React Native With Me

Type ‘{}’ is not assignable to type ‘ReactNode’ module not used as JSX

Akash Mittal
November 13, 2022

module cannot be used as a JSX component; Type ‘{}’ is not assignable to type ‘ReactNode’ because React 18 has some breaking changes like ReactDOM.render() is deprecated. You need to…

View Post

How to change the dark-light theme of keyboard in React native?

Akash Mittal
December 9, 2022

React Native supports changing the theme of keyboard from dark to light and vice-versa. The keyboard appears when an input field is focused. So, the functionality is derived from input…

View Post

How to create a simple text in React Native? Code Example

Akash Mittal
December 9, 2022

In order to create text in React Native we need to use <Text> component. This is one of the most useful component and highly customizable. Text component supports various styles…

View Post

How to change toggle switch color in React Native? Code Example

Akash Mittal
December 9, 2022

In order to change the toggle switch color we need to use props like – thumbColor – To change the color of circular disc. It accepts color value. trackColor –…

View Post

How to disable the toggle switch in React Native? Code Example

Akash Mittal
December 9, 2022

In order to disable the toggle switch in React Native, we can use disabled prop of <Switch> component and set it to true. Once the switch is disabled, the user…

View Post

Create reusable checkbox component in reactjs and store state in redux?

Akash Mittal
October 9, 2022

A reusable checkbox component can help you in displaying custom checkbox in your project at multiple places. This will speedup your process of creating checkboxes multiple times throughout application design.…

View Post

How to create react website without nodejs? Code Example

Akash Mittal
September 27, 2022

Generally when we create a react website we use create-react-app utility. We create the whole project using NodeJS. But it’s possible to use reactjs framework without nodejs. All we need…

View Post

error:0308010C:digital envelope routines::unsupported – Code Example

Akash Mittal
October 17, 2022

Openssl has removed support from insecure protocols. But some of the packages in nodejs are still using them. Due to this they are throwing 0308010C:digital envelope routines::unsupported error. In this…

View Post

imgbb upload in React JS using imgbb-uploader plugin – Code Example

Akash Mittal
September 5, 2022

imgbb is an image upload website where you can host your images of size upto 32 mb. In this article we will learn how to upload images on imgbb using…

View Post

How to create a video player in ReactJs? – Code Example

Akash Mittal
September 2, 2022

Today in this article we will see how we can create a video player in ReactJs using react-player library. React-player provides components which can be used to play videos of…

View Post

How to create a music player in ReactJS? – Code Example

Akash Mittal
September 5, 2022

In this article we will create a music player in reactjs using react-jinke-music-player library. It’s an html5 responsive player which can be included as component into any react project. There…

View Post

Uncaught ReferenceError: process is not defined ReactJS – Code Example

Akash Mittal
August 30, 2022

React-Scripts throws the error Uncaught ReferenceError: process is not defined due to it’s dependency on react-error-overlay. The dependencies of react-error-overlay got updated to support webpack V5 which is not compatible…

View Post

How to create navbar in Chakra-ui? – Code Example

Akash Mittal
August 30, 2022

In this article I will share the code to create navbar in chakra-ui. We will use React Js for this. You may use any framework of your choice. Primary components…

View Post

How to customize theme of chakra-ui in react project? – Code Example

Akash Mittal
August 30, 2022

In this article I will show you how to customize a default theme of chakra-ui in your react project. You need to add theme attribute in ChakraProvider component in App.js.…

View Post

How to install Chakra-ui in react project? – Code Example

Akash Mittal
August 30, 2022

In this article we will show you how to install Chakra-ui in react projects. You can use the template property of create-react-app to start your project with chakra built in.…

View Post

Allocate heap memory to JavaScript in Next.js, Reactjs – Code Example

Akash Mittal
August 30, 2022

You may allocate heap memory to JavaScript in any node framework like NextJs or ReactJs from package.json. Generally you never encounter heap error but if you are getting one then…

View Post

Component not re-rendering on array state change – Code Example

Akash Mittal
September 5, 2022

Array is referenced through it’s memory location. This location doesn’t change when there is some update over array. A react state takes this location. But since the location doesn’t change…

View Post

Set & Clear Timeout in React Component on (un)mount – Code Example

Akash Mittal
August 30, 2022

To set and clear timeout in React component, you can use useEffect() hook with empty array as second parameter. You can clear a timeout from the return function because a…

View Post

React Hook “useEffect” is called conditionally – Code Example

Akash Mittal
August 30, 2022

React hooks are needed to be executed in the same order as they are defined. This should happen at each render of the component. But if you use hooks like…

View Post

component is changing controlled input to be uncontrolled – Code Example

Akash Mittal
August 30, 2022

A controlled input is run by state. If this state gets undefined then the controlled input becomes uncontrolled and you will get the warning: A component is changing a controlled…

View Post