Go to google.com Search random You will see this Set min max and click Generate, you will get a random number every time. Not sure what algorithm Google uses but I doubt its Math.random
-
-
Show emoji in your webpage title or browser tab
You might have seen emoji in some websites’ browser title bar. I have not talking about the favicon. I am taking about emoji, thats what you see in browser tab right after favicon or anywhere in webpage. This is what I am talking, you see the sun emoji in the browser tab. How to do it: Find an emoji. eg: Go to https://emojipedia.org/ search and find a emoji. Copy it. Open you webpage which supports unicode. (Notepad++, VSCode etc) Paste the emoji you copied, in the head > title tag. Important step: Add the below meta tag inside your head tag. You code will now look like this. Thats it,…
-
React environment variables not working or undefined
In ReactJS environment variables are fetched from .env files. If you set the variable in .env file and your variables returned undefined check the below items. Assumption: You have used Create React App (CRA) to bootstrap your application The .env file should be in the root for you application folder. That is one level above your src folder, the same place where you have your package.json The variable should be prefixed with REACT_APP_ You need to restart the server to reflect the changes in your code. You should access the variable in your code like this process.env.REACT_APP_SOME_VARIABLE No need to wrap your variable value in single or double quotes. Do…
-
Object key as variable
Create a JavaScript object with dynamic keys, that is key name will come from variable. I want to create an object like this. Here car is the key and red is the value, Now I need the object key car to come from a variable called item. In ES5 we do it like this But in ES6 we can do like this. Hope this helps 🧡
-
LED series and parallel circuit generator
The LED series/parallel array wizard is a calculator that will help you design large arrays of LEDs. The LED calculator was great for single LEDs — but when you have several LEDs, the below wizard will help you arrange them in a series or combined series/parallel configuration. Wizard link http://led.linear1.org/led.wiz The wizard determines the current limiting resistor value for each portion of the array and calculates power consumed. All you need to know are the specs of your LEDs and how many you’d like to use.
-
Warning when using withRouter with new React Context API
React version : > 16.6 Getting this warning when using Context API with withRouter Warning: withRouter(Home): Function components do not support contextType. This happens when use the React context API like this Home.contextType = AppContext; export default withRouter( Home ); // warning is triggering here To fix this we need to use hoist-non-react-statics to automatically copy all non-React static methods. I used hoist-non-react-statics version 3.1.0. Install `hoist-non-react-statics` using command `npm i hoist-non-react-statics` Link here Import it in your file import hoistNonReactStatics from 'hoist-non-react-statics'; After importing, export your component like this Home.contextType = AppContext; export default hoistNonReactStatics( Home, withRouter ( Home) ); Related reading here, here and here
-
Add attributes with empty values in ReactJS
There are times when you want to add html tag attributes in a React app. We normally add attributes based on some logic, for example if some state value is true set the value of the attribute as something. Example <div className={ this.state.isRisk ? "danger" : "normal">...</div> This will be either rendered as <div class="danger">...</div> or div class="normal">...</div> based on the state value isRisk In the above case there is a value for the attribute, that is class="danger" . Sometimes you don’t want to have any value for the attribute. I was using a third party library which checks only if the attribute is present, it does not care about the attribute values. So I…
-
React — How to pass event or any other details to onClick or other event handlers
We may need to get a the event details in a onClick or onChange event handler. Normal event handler will look like this. <button onClick={ this.handleClick } >Save </button><input type="text" onChange={ this.handleChange } /> In the above case we are not passing any event details to handler function. Consider the input example above, we need to get the input value in event handler, how do we do it? We need to pass the event details to the handler function. This is how to do it. <input type="text" onChange={ (evt) => this.handleChange(evt) } /> The handleChange function handleChange(evt) { // ---------^ this variable will have the event details. //get the value of the input box…