Add component prop based on condition in ReactJS

In this article we will discuss how to add or pass a component prop based on a condition.

Lets have a component named MyButtonComponent that takes a prop name

<MyButtonComponent name="some text"  />

Now I need to pass this prop based on a flag called hasName of type Boolean

We can do this using the spread operator

<MyButtonComponent {...(hasName ? {name: "some text"} : {} )}  />

What are we doing?

We are using spread operator to spread the object {name: “some text”} or an empty object {} based on the value of our flag hasName. To check the condition we are using ternary operator. So the component have name prop or no prop named name

Hope it helps, happy coding…

🍺

Bootstrap 5 Alpha 1 is out

These are the notable changes

• Has more colors and improvised color palette
• jQuery is not included and is not required any more, still everything works. Isn’t that good?
• No IE support. (at last….)
• Updated form components
• Customization support for checkbox, radio, switches
• Utilities API – The utility API is a Sass based tool to generate utility classes.
• New xxl breakpoint
• New gutters class
• Bootstrap icons – Bootstrap now has its own icons – the SVG icons.

Check it out here https://v5.getbootstrap.com/

Please note that since its a alpha version there might be breaking changes in next release.

Error: Cannot find module ‘puppeteer/DeviceDescriptors’

This top level file has been removed from the Puppeteer package from puppeteer v5.0.0. . The same data is exposed via puppeteer.devices

Use this if you are using version 5 or above

const puppeteer = require('puppeteer');
const devices = puppeteer.devices;

Optional Chaining in ES7

What is optional chaining?
Optional chaining allows you to access the value of a property in a nested object without the need to validate each object key/value in the chain.

I will try to explain it with an example.

I have an object, the value I have is deep inside a nested object.

  let data = {
    user: {
      feed: {
        edgeReels: {
          tray: {
            node: {
              dataExpiryDays: 2
            }
          }
        }
      }
    }
  };

I want to check the value of dataExpiryDays and do something.

We can do this like this

if(data.user.feed.edgeReels.tray.node.dataExpiryDays) {
    // do something
}

Wait…. anyone using JavaScript might know the potential dangers of this approach. If any of the nested object is not available or null the above line of code will break.

Example if the key edgeReels is not available, you will get an error like Cannot access tray of undefined .

So we write the above code like this.

  if (
    data &&
    data.user &&
    data.user.feed &&
    data.user.feed.edgeReels &&
    data.user.feed.edgeReels.tray &&
    data.user.feed.edgeReels.tray.node &&
    data.user.feed.edgeReels.tray.node.dataExpiryDays
  ) {
    // do something
  }

See you need to do a check for every keys in each nested level.

To avoid these kind of checks, there was new feature proposal called Optional Chaining to be included in ES7. The proposal is now in Stage 4 (5/31/2020 – when I was writing this.) . See the proposal here.

The Optional Chaining operator ?.

With optional chaining operator we can write the above if condition like this.

if(data?.user?.feed?.edgeReels?.tray?.node?.dataExpiryDays) {
    // do something
}

If any of the keys are missing subsequent checks are not done and the if condition fails.

Question 1: Can we validate an array position using Optional chaining?

Yes. like this

if(data?.nameArray?.[0]) {
 // nameArray has index 0
}

Now the big questions.

1. Can we use Optional chaining in my JavaScript project?
2. Can we use Optional chaining in my React App?

Can we use Optional chaining in my JavaScript project?

No. As Optional chaining is still in proposal stage, most browsers will NOT have full support implemented. So I recommend not to use it unless you add polyfills. As of 8/8/2022 all latest browser versions support optional chaining. The latest browser support can be viewed here in CanIUse website.

Can we use Optional chaining in my React App?

React CRA uses Babel. Babel is a JavaScript transcompiler  which makes new/next generation JavaScript features backward compatible with all browsers(don’t expect IE older versions).

So if you use React or Gastby or any other JavaScript project uses Babel 7.8 or above versions you are good to use Optional Chaining. If you are using React CRA check Babel version inside node-modules/@babel/core/package.json or check for a folder plugin-proposal-optional-chaining inside node-modules/@babel/

Check it out and post your comments if any.

Happy coding…. 🍺

ReactJS disable hook eslint warnings

Think twice when you are trying to disable the hook eslint warnings.

This is was our prophet Dan Abramov say about it.

Still if you want to remove the warning add the below like before the violating line

 // eslint-disable-next-line react-hooks/exhaustive-deps 

Add dark mode in your website with 3 lines of code

Use the below 3 lines of code in your CSS file to active dark mode

Add below code in your style sheet.

html body * {
    background-color: black !important;
    color: white !important;
}

Add Twitter timeline in ReactJS

• Go to https://publish.twitter.com to get the embed code.

• Copy the embed code

The embed code will look like this

• Goto index.html in your public folder in your ReactJS app. I assume you created the app via CRA

• Cut the script tag from the embed code inside your head tag in index.html
• Now we have only the first line that’s the anchor (“a”) tag.
• Added the anchor tag in you component wherever you need to show it.

Now we need to load the twitter embed code.

Do this to load twitter embed code

For Class component

componentDidMount: function() {
      window.twttr &&
      window.twttr.widgets &&
      typeof window.twttr.widgets.load === "function" &&
      window.twttr.widgets.load();
}

For Functional component, use the useLayoutEffect hook

  useLayoutEffect(() => {
      window.twttr &&
      window.twttr.widgets &&
      typeof window.twttr.widgets.load === "function" &&
      window.twttr.widgets.load();
  });

Happy coding 🍺

India COVID-19 dashboard

Created a dashboard for WhatIndiaThinks.com on Coronavirus COVID-19. This dashboard is specifically for India cases.

Check out the dashboard

Tech stack

• React JS
• Sass
• Node JS
• Material UI
• Recharts / D3
• PHP
• Deployed on Apache server

Recharts show legend on top of chart

Use below to move Recharts legend to top of the graph. In fact you can position the legends any where (top, right, bottom , left, left top, left middle etc) you like. I have added few code samples for that corresponding images. Please go through it.

<Legend layout="horizontal" verticalAlign="top" align="center" />

I am using a Pie chart, so the above code will show legend on top of the chart and it looks like this.

Lets try few other styles

<Legend verticalAlign="middle" align="center" />

<Legend verticalAlign="bottom" align="center" />

<Legend layout="vertical" verticalAlign="middle" align="right" />

<Legend layout="vertical" verticalAlign="top" align="right" />

The overall code looks like this.

Resistor Calculator

Resistor Calculator for engineers, hobbyists and enthusiasts with an innovative user interface.

Create a tool to calculate value of a resistor. Just select the colors of the resistor and the calculator will show you the resistor value with a pictorial representation of the resistor.

Check here : https://resistorcalc.netlify.com/