The accent-color css property is used to change the background color of checkboxes or radio buttons. accent-color: red; Example HTML <input type="checkbox" value="some value" /> CSS input[type="checkbox"] { accent-color: red; } See the Pen useState-blog-example by Mohammadshahzaib007 (@mohammadshahzaib007) on CodePen. If you find it helpfull please share with your network ✅. Happy Coding 🙌 !

Some time we have to show the JSON data to the client, but in React js we can not directly rendered the json data if we do so; we will get the error something like this. Objects are not valid as a React child Let’s see how to tackle this. //App.js // json that we want to show. const json = [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut" }, { "userId": 1, "id": 4, "title": "eum et est occaecati", "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit" } ]; export default function App() { return ( <div> <pre> <code>{JSON....

I had to remove a HTML element on page unmount in React and I came to know about removeAttribute() method. Let’s have look at this. Syntax node.removeAttribute(attrName); // node is nothing but an element whose attribute has to be removed Return value is undefined Parameters A string specifying the name of the attribute to remove from the element. If the specified attribute does not exist,removeAttribute() returns without generating an error....

Recently I was working on one of my projects and I encountered one scenario in which I had to check that whether the number is positive or negative according to the number’s nature I had to run the logic and then I came to know about Math.sign(). I should share this thing with you 😊.. There is a built in fuctinon in javascript Math.sign(), The Math.sign() function returns either a positive or negative +/- 1, indicating the sign of a number passed into the argument....

In this post we are going to discuss how to get the height and width of an element with Javascript. There are several properties we can look at in order to get the width and height of elements, and it can be tricky to determine which is the right one for your needs. Let’s discuss about some of these. const containerEle = document.getElementById("container"); const clientWidth = containerEle.clientWidth; const clientHeight = containerEle....

The useMemo useMemo hook returns a memoized value. It only runs when one of its dependencies update. syntax const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); The useMemo and useCallback Hooks work on the same mechanism. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function. You can learn more about useCallback in the useCallback blog . Example Without useMemo import { useState } from "react"; import "....

The useCallback To understand the useCallback hook first we will have to learn about memoisation what does it really mean? Memoisation In computing, memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Now let’s go back to the useCallback hook. useCallback hook is nothing but it returns memoized callback function....

Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. The useState hook is one of them. Let’s go through this hook ❤️. The useState If you are following the functional-based component approach then This is the hook that you must be using a lot. The useState hook has been introduced to handle the state inside the functional component....

Today I am going to share my best resources that help me a lot while development. Without further ado, let’s have a look at the list. 1) Clippy Clippy is an amazing toot. It makes it easier to use css’s clip-path property. With the help of this tool we can achieve desired shapes of an element. 2) Google Fonts Google Fonts #1 resource for free and easy-to-use webfonts....

For creating a mock api we will use the json-server package that will help us to create a mock api without any hassle. Which can be consumed by any framework of javascript like React, Vue, Angular etc. Even without them. To install this in your machine globally run this command. npm install -g json-server Create a folder where you want to create a mock api in my case I will create a folder with api name....