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
  let value = evt.target.value;}

Similarly we can also send any other information to the event handler function.

render() {
   let name = "Sput";    return <input type="text" onChange={ (evt, name) => this.handleChange(evt, name) } />
}

The handleChange function will look like this.

handleChange(evt, name) {
  // --------------^ this variable will have the name details.
}

Hope this helps 🍺

Convert JavaScript object to FormData

Scenario: I was using Formik in React. There was a need to convert formik values to FormData to send to API as post.

This is how it was done.

// A sample object  
let values = { name : 'Kiran', location: 'Sedona' };

let data = new FormData();
for (let key in values) {
    data.append(key, values[key]);
}
console.log(data);

Make React work in IE11

These are the most probable reasons your Create React App (CRA) is not working in Internet Explorer 11 (IE11)

1. IE11 is not included in package.json browserList
2. Promise fails in IE11
3. fetch function fails in IE11

Fix

Update package.json browserList

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],

to this (see minimum IE version changed from <=11 to <=10)

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "not op_mini all"
  ],

Add support for fetch

Add npm packages whatwg-fetch

npm i whatwg-fetch

Add support for Promise and other polyfills

Add npm package core-js and regenerator-runtime

 npm i core-js 

npm i regenerator-runtime

Update src/index.js with the newly added packages

import 'whatwg-fetch';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

This should work your CRA in IE11.

Remove map files in React CRA

Map files are generated by default when you do a build using webpack.
If you don’t want .map files in your build you can do the below steps.

1. Create a new .env in your project root (don’t put it in src folder)
2. Add GENERATE_SOURCEMAP=false in your .env file
3. Execute command npm run build, this should build files without any map files.

Your .env file will look like this.