html-to-draftjs window is not defined error

Fix for the issue window is not defined when using html-to-draftjs (npm link )

The version if the html-to-draftjs is 1.5.0 in nextjs version 10.0.5.

Below is the error thrown when integrated htmlToDraft in page.

This issue is fixed using below code at the top of the page just below imports

let htmlToDraft = null;
if (typeof window === 'object') {
  htmlToDraft = require('html-to-draftjs').default;
}

Hope this helps, happy coding
🍺🍺

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…

🍺

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…. 🍺

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.

React Table 7.x – Hide Column Header Row

Scenario: I am using the new React Table 7x (the headless component). By default there will be a column header for the entire table columns. You can give empty string so that the Header will not be shown. By the problem is that row in html will be still rendered (see the below image). So I want to hide the entire row in html. I am using Material Table with react-table to render the table.

Row with empty contents

Solution

Add a custom key hideHeader: false, in the columns variable.

In the Material table check for this key.

<TableHead>
        {headerGroups.map((headerGroup) => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => {
              return column.hideHeader === false ? null : (
                <TableCell {...column.getHeaderProps()}>
                  {column.render('Header')}
                </TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>

This should remove the empty row from html output.

Happy coding

🌟 🎄 🎅 🦌

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

1. 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
2. The variable should be prefixed with REACT_APP_
3. You need to restart the server to reflect the changes in your code.
4. You should access the variable in your code like this
   process.env.REACT_APP_SOME_VARIABLE
5. No need to wrap your variable value in single or double quotes.
6. Do not put semicolon ; or comma , at the end of each line.

Happy coding ☕

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 tried something like this.

<div { this.state.isPrint ? data-is-print : null } >...</div> 

I am using vscode editor and it will immediately throw the below error.

vscode error when trying to add attribute with empty values

I need the output like 

<div data-is-print>...</div>

This is how to do that.

Have a variable like this.

let dataIsPrint = this.state.isPrint ? { "data-is-print" : "" } : {};

In the render() use like this.

<div { ...dataIsPrint } > Some text </div>

The rendered code will look like this.

<div data-is-print> Some text </div>

The same method can be used to add checked and disabled attributes in form inputs.

Hope this helps… 🍹