React 16 not working in IE11, blank screen

I got these errors in IE11 and the React app was not rendering in IE11, it just shows a blank screen.

SCRIPT5009: 'fetch' is undefined
main.chunk.js (1020,3)

SCRIPT5009: 'Promise' is undefined
1.chunk.js (29037,9)


Fix,

Installed whatwg-fetch  and @babel/polyfill

npm install whatwg-fetch --save
npm install @babel/polyfill --save

After installation we need to include it in index.js

import 'whatwg-fetch';

import '@babel/polyfill';

This has to be done before importing React.

React JS set focus on a input

Use the prop autoFocus in a input to make it auto focus

eg:

<input autoFocus className="btn" type="text" />

Recharts - Show dashed line

If you need to show dashed line for a line chart use the below code.

<Line type="linear" dataKey="trend" strokeDasharray="3 3"
stroke="#69C568" dot={{strokeDasharray: 'none'}} />

You need to add property strokeDasharray="3 3" to the <Line /> You can change the values if needed.

The legend dots will also be plotted as dotted lines. If you want to remove that use the dot prop.

dot={{strokeDasharray: 'none'}}

React JS send custom parameter to onClick

If you need to send a custom parameter to your onClick event handler, do like this

<a href="" onClick={()=> {this.tabClicked("Exceptions")}}>Exceptions</a>

if you need to pass the event as well to the onClick handler use like this

<a href="" onClick={(evt)=> {this.tabClicked(evt,"Exceptions")}}>Exceptions</a>

and in your tabClicked() you can get the parameters like this

tabClicked(evt, tab) {

evt.preventDefault(); // Let's stop this event.

alert(tab); // should alert Exceptions

}

create-react-app custom build to subfolder

Add a key "homepage": "your-subfolder/"  in your package.json 
All static files will be loaded from "your-subfolder"

If there is no subfolder and you need to load from same folder you need to add the path as "./"

"homepage": "./",

Link Bootstrap to your React JS application.

Once you have already installed the Bootstrap using npm command do the below to include the Bootstrap in your React app


index.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

App.js (to test)

<button type="button" className="btn btn-primary">Primary</button>

The entire App.js will something like this

import React, { Component } from 'react'; 

class App extends Component { 

 render() { 
 return ( 
 <div> 
 <button type="button" className="btn btn-primary">Primary</button> 
 </div> );
 } 
} 
export default App;