     ({ latitude, longitude } = props.userLocation.coords);

Destructuring needs to be either after a `let`, `const` or `var` declaration or it needs to be in an expression context to distinguish it from a block statement.
  

I am working on web application using React and bootstrap. When it comes to applying button onClick, it takes me hard time to let my page being redirect to another.  if after  a href , I cannot go the another page. 

So would you please tell me is there any need for using react-navigation or other to navigate the page using Button onClick ? 

    import React, { Component } from &#39;react&#39;;
    import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from &#39;reactstrap&#39;;
     
    class LoginLayout extends Component {
     
      render() {
        return (
     &lt;div className=&quot;app flex-row align-items-center&quot;&gt;
            &lt;Container&gt;
         ...
                        &lt;Row&gt;
                          &lt;Col xs=&quot;6&quot;&gt;                      
                            &lt;Button color=&quot;primary&quot; className=&quot;px-4&quot;&gt;
                                Login
                             &lt;/Button&gt;
                          &lt;/Col&gt;
                          &lt;Col xs=&quot;6&quot; className=&quot;text-right&quot;&gt;
                            &lt;Button color=&quot;link&quot; className=&quot;px-0&quot;&gt;Forgot password?&lt;/Button&gt;
                          &lt;/Col&gt;
                        &lt;/Row&gt;
                   ...
            &lt;/Container&gt;
          &lt;/div&gt;
        );
      }
    }
     



react button onClick redirect page

I can [make a class an error boundary][1] in React by implementing `componentDidCatch`.

Is there a clean approach to making a functional component into an error boundary without converting it into a class?

Or is this a code smell?


  [1]: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

How can I make use of Error boundaries in functional React components?

In my React app I am using airbnb&#39;s eslint style guide which will throw an error if I do not use destructuing.

In the situation below, I first use `let` to assign the two variables `latitude` and `longitude` to the coordinates of the first item in an array of location objects. Then I try to use destructuring to re-assign their values if the user has given me access to their location.

    
    
    let latitude = locations[0].coordinates[1];
    let longitude = locations[0].coordinates[0];

    if (props.userLocation.coords) {
      // doesn&#39;t work - unexpected token
      { latitude, longitude } = props.userLocation.coords;

      // causes linting errors
      // latitude = props.userLocation.coords.latitude;
      // longitude = props.userLocation.coords.longitude;
    }

Destructuring inside the `if` statement causes an `unexpected token` error.

Re-assigning the variables the old fashioned way causes an `ESlint: Use object destructuring` error.

Javascript re-assign let variable with destructuring

In my React app I am using airbnb's eslint style guide which will throw an error if I do not use destructuing.
In the situation below, I first use <code>let</code> to assign the two variables <code>latitude</code> and <code>longitude</code> to the coordinates of the first item in an array of location objects. Then I try to use destructuring to re-assign their values if the user has given me access to their location.
<pre><code class="hljs language-ini">let latitude = locations[0].coordinates[1];
let longitude = locations[0].coordinates[0];

if (props.userLocation.coords) {
 // doesn't work - unexpected token
 { latitude, longitude } = props.userLocation.coords;

 // causes linting errors
 // latitude = props.userLocation.coords.latitude;
 // longitude = props.userLocation.coords.longitude;
}
</code></pre>
Destructuring inside the <code>if</code> statement causes an <code>unexpected token</code> error.
Re-assigning the variables the old fashioned way causes an <code>ESlint: Use object destructuring</code> error.

I upgraded Google Chrome to `Version 64.0.3282.140 (Official Build) (64-bit)` on a Windows 10 machine. Once I did, I am getting this error on my site within the developer tools console. Not real sure where to start. I did see a similar issue last year that was an issue with youtube (also in the url), but I haven&#39;t seen any solutions. 


    
    Error parsing header X-XSS-Protection: 1; mode=block; 
    report=https://www.google.com/appserve/security-bugs/log/youtube: insecure 
    reporting URL for secure page at character position 22. The default 
    protections will be applied.
    16:07:31.905

I&#39;m also seeing the issue when I go directly to youtube via the embedded url so it&#39;s not just on my site. 

UPDATE 

I&#39;ve attached a photo of the headers in the response that indicate the google.com url that appears to be generating the issue. 

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/QsvVy.png

Error parsing header X-XSS-Protection - Google Chrome

When testing a module that has a dependency in a different file and assigning that module to be a `jest.mock`, TypeScript gives an error that the method `mockReturnThisOnce` (or any other `jest.mock` method) does not exist on the dependency, this is because it is previously typed. 

What is the proper way to get TypeScript to inherit the types from `jest.mock`?

Here is a quick example.

Dependency

    const myDep = (name: string) =&gt; name;
    export default myDep;

test.ts

    import * as dep from &#39;../depenendency&#39;;
    jest.mock(&#39;../dependency&#39;);

    it(&#39;should do what I need&#39;, () =&gt; {
      //this throws ts error
      // Property mockReturnValueOnce does not exist on type (name: string)....
      dep.default.mockReturnValueOnce(&#39;return&#39;)
    }

I feel like this is a very common use case and not sure how to properly type this.

Mock dependency in Jest with TypeScript

Looking for a way to add an &quot;Export to CSV&quot; button to a  react-table which is an npmjs package ([https://www.npmjs.com/package/react-table][1]).

I need to add a custom button for exporting the table data to an excel sheet in the csv or xls format?


  [1]: https://www.npmjs.com/package/react-table

Export to CSV button in react table

I&#39;m having issues disabling certain options within a large list within a React Select element. I have around 6,500 options that get loaded into the select. At first I was having issues with the search functionality lagging but then I started using react-select-fast-filter-options which took care of that problem. Now the issue is that I need to disable certain options depending on the propType &quot;picks&quot;. Here is the code:

    import React, {Component} from &#39;react&#39;
    import PropTypes from &#39;prop-types&#39;;
    import &#39;react-select/dist/react-select.css&#39;
    import &#39;react-virtualized/styles.css&#39;
    import &#39;react-virtualized-select/styles.css&#39;
    import Select from &#39;react-virtualized-select&#39;
    import createFilterOptions from &#39;react-select-fast-filter-options&#39;;
    
    let options = [];
    if(typeof stockSearchStocks !== &#39;undefined&#39;) {
        //loads in all available options from backend by laying down a static js var
        options = stockSearchStocks
    }
    const filterOptions =  createFilterOptions({options});
    
    class StockSearch extends Component {
        static propTypes = {
            exchanges: PropTypes.array.isRequired,
            onSelectChange: PropTypes.func.isRequired,
            searchDisabled: PropTypes.bool.isRequired,
            picks: PropTypes.array.isRequired,
            stock_edit_to_show: PropTypes.number
        }
    
        /**
         * Component Bridge Function
         * @param stock_id stocks id in the database
         */
        stockSearchChange = (stock_id) =&gt; {
            this.props.onSelectChange(stock_id);
        }
    
         //this is my current attempt to at least 
         //disable options on component mount but this doesn&#39;t seem to be working
        componentWillMount = () =&gt; {
            console.log(&#39;picks!: &#39; + JSON.stringify(this.props.picks));
            let pickIDs = this.props.picks.map((p) =&gt; p.stock_id);
            options = options.map((o) =&gt; {
                // console.log(pickIDs.indexOf(o.value));
                if(pickIDs.indexOf(o.value)) {
                    // console.log(&#39;here is the option: &#39; + JSON.stringify(o));
                    // console.log(&#39;here is the option: &#39; + o.disabled);
                    o.disabled = true;
                }
            })
    
        }
    
        /**
         * handles selected option from the stock select
         * @param selectedOption
         */
        handleSelect = (selectedOption) =&gt; {
            this.stockSearchChange(selectedOption.value);
        }
    
        render() {
            return (
                &lt;div className=&quot;stock-search-container&quot;&gt;
                    &lt;Select
                        name=&quot;stock-search&quot;
                        options={options}
                        placeholder=&quot;Type or select a stock here...&quot;
                        onChange={this.handleSelect}
                        disabled={this.props.searchDisabled}
                        value={this.props.stock_edit_to_show}
                        filterOptions={filterOptions}
                    /&gt;
                &lt;/div&gt;
            )
        }
    }
    
    export default StockSearch;

I have tried filtering through the picks props and changing that options variable to include `disabled:true` but this lags the application and I&#39;m not sure if that will work now that I&#39;m using react-select-fast-filter-options as it seems to be doing some sort of indexing. Is there a way to filter through the options var to find all instances of the picks prop and disable those options quickly?

React Select disable options

I&#39;d like to **change the implementation of a mocked dependency** on a per **single test basis** by **extending the default mock**&#39;s behaviour and **reverting it back** to the original implementation when the next test executes.

More briefly this is what I&#39;m trying to achieve:

 1. **mock** dependency
 2. **change/extend mock implementation** in a single test
 3. **revert back** to original mock when next test executes

I&#39;m currently using `Jest v21`.

Here is what a typical Jest test would look like:

**`__mocks__/myModule.js`**

    const myMockedModule = jest.genMockFromModule(&#39;../myModule&#39;);
    
    myMockedModule.a = jest.fn(() =&gt; true);
    myMockedModule.b = jest.fn(() =&gt; true);
    
    export default myMockedModule;


**`__tests__/myTest.js`**

    import myMockedModule from &#39;../myModule&#39;;
    
    // Mock myModule
    jest.mock(&#39;../myModule&#39;);
    
    beforeEach(() =&gt; {
      jest.clearAllMocks();
    });
    
    describe(&#39;MyTest&#39;, () =&gt; {
      it(&#39;should test with default mock&#39;, () =&gt; {
        myMockedModule.a(); // === true
        myMockedModule.b(); // === true
      });
    
      it(&#39;should override myMockedModule.b mock result (and leave the other methods untouched)&#39;, () =&gt; {
        // Extend change mock
        myMockedModule.a(); // === true
        myMockedModule.b(); // === &#39;overridden&#39;
        // Restore mock to original implementation with no side effects
      });
    
      it(&#39;should revert back to default myMockedModule mock&#39;, () =&gt; {
        myMockedModule.a(); // === true
        myMockedModule.b(); // === true
      });
    });

Here is what I&#39;ve tried so far:


----------


1 - [mockFn.mockImplementationOnce(fn)][1]
-----------------------------------------------

**pros**

 - Reverts back to original implementation after first call

**cons**

 - It breaks if the test calls `b` multiple times
 - It doesn&#39;t revert to original implementation until `b` is not called (leaking out in the next test)

**code:**

    it(&#39;should override myModule.b mock result (and leave the other methods untouched)&#39;, () =&gt; {
    
      myMockedModule.b.mockImplementationOnce(() =&gt; &#39;overridden&#39;);
    
      myModule.a(); // === true
      myModule.b(); // === &#39;overridden&#39;
    });


----------


2 - [jest.doMock(moduleName, factory, options)][2]
-----------------------------------------------

**pros**

 - Explicitly re-mocks on every test

**cons**

 - Cannot define default mock implementation for all tests
 - Cannot extend default implementation forcing to re-declare each mocked
   method
 
**code:**

    it(&#39;should override myModule.b mock result (and leave the other methods untouched)&#39;, () =&gt; {
    
      jest.doMock(&#39;../myModule&#39;, () =&gt; {
        return {
          a: jest.fn(() =&gt; true,
          b: jest.fn(() =&gt; &#39;overridden&#39;,
        }
      });
    
      myModule.a(); // === true
      myModule.b(); // === &#39;overridden&#39;
    });


----------

3 - Manual mocking with setter methods (as explained [here][3])
------------------------------------------------------------

**pros**

 - Full control over mocked results

**cons**

 - Lot of boilerplate code
 - Hard to maintain on long term

**code:**

**`__mocks__/myModule.js`**

    const myMockedModule = jest.genMockFromModule(&#39;../myModule&#39;);

    let a = true;
    let b = true;
    
    myMockedModule.a = jest.fn(() =&gt; a);
    myMockedModule.b = jest.fn(() =&gt; b);
    
    myMockedModule.__setA = (value) =&gt; { a = value };
    myMockedModule.__setB = (value) =&gt; { b = value };
    myMockedModule.__reset = () =&gt; {
      a = true;
      b = true;
    };
    export default myMockedModule;

**`__tests__/myTest.js`**

    it(&#39;should override myModule.b mock result (and leave the other methods untouched)&#39;, () =&gt; {
      myModule.__setB(&#39;overridden&#39;);
    
      myModule.a(); // === true
      myModule.b(); // === &#39;overridden&#39;
    
      myModule.__reset();
    });


----------

4 - [jest.spyOn(object, methodName)][4]
---------------------------------------

**cons**

 - I can&#39;t revert back `mockImplementation` to the original mocked return value, therefore affecting the next tests

**code:**

    beforeEach(() =&gt; {
      jest.clearAllMocks();
      jest.restoreAllMocks();
    });

    // Mock myModule
    jest.mock(&#39;../myModule&#39;);
    
    it(&#39;should override myModule.b mock result (and leave the other methods untouched)&#39;, () =&gt; {
    
      const spy = jest.spyOn(myMockedModule, &#39;b&#39;).mockImplementation(() =&gt; &#39;overridden&#39;);
    
      myMockedModule.a(); // === true
      myMockedModule.b(); // === &#39;overridden&#39;
    
      // How to get back to original mocked value?
    });

  [1]: https://facebook.github.io/jest/docs/en/mock-function-api.html#mockfnmockimplementationoncefn
  [2]: https://facebook.github.io/jest/docs/en/jest-object.html#jestdomockmodulename-factory-options
  [3]: https://facebook.github.io/jest/docs/en/manual-mocks.html#docsNav
  [4]: https://facebook.github.io/jest/docs/en/jest-object.html#jestspyonobject-methodname

How to change mock implementation on a per single test basis [Jestjs]

What is the difference between `spread operator` and `array.concat()`

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    let parts = [&#39;four&#39;, &#39;five&#39;];
    let numbers = [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;];
    console.log([...numbers, ...parts]);

&lt;!-- end snippet --&gt;


`Array.concat()` function 


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    let parts = [&#39;four&#39;, &#39;five&#39;];
    let numbers = [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;];
    console.log(numbers.concat(parts));

&lt;!-- end snippet --&gt;

&gt;Both results are same. So, what kind of scenarios we want to use them? And which one is best for performance?

spread operator vs array.concat()

I have an ES6 module that exports two constants:

    export const foo = &quot;foo&quot;;
    export const bar = &quot;bar&quot;;

I can do the following in another module:

    import { foo as f, bar as b } from &#39;module&#39;;
    console.log(`${f} ${b}`); // foo bar

When I use NodeJS modules, I would have written it like this:

    module.exports.foo = &quot;foo&quot;;
    module.exports.bar = &quot;bar&quot;;

Now when I use it in another module can I somehow rename the imported variables as with ES6 modules?

    const { foo as f, bar as b } = require(&#39;module&#39;); // invalid syntax
    console.log(`${f} ${b}`); // foo bar

How can I rename the imported constants in NodeJS modules?


Can I use alias with NodeJS require function?

I can&#39;t figure out why this trivial code is not working:

**index.html:**



&lt;!-- language: lang-html --&gt;

    &lt;!doctype HTML&gt;
    &lt;html&gt;

    &lt;head&gt;
      &lt;script type=&quot;module&quot; src=&quot;/showImport.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;button onclick=&quot;showImportedMessage();&quot;&gt;Show Message&lt;/button&gt;
    &lt;/body&gt;

    &lt;/html&gt;


**showImport.js:**

    import showMessage from &#39;/show.js&#39;;
    
    function showImportedMessage() {
        showMessage();
    }

**show.js:**

    export default &quot;Why do I need this?&quot;;
    
    export function showMessage() {
        alert(&quot;Hello!&quot;);
    }

It is being served by NPM **http-server**. When I connect with Chrome (v65), I see the following error


    (index):8 Uncaught ReferenceError: showImportedMessage is not defined
        at HTMLButtonElement.onclick ((index):8)
    onclick @ (index):8

If I get rid of `type=module` (and import/export by putting the `showMessage` function right in `showImport.js`) everything works, but *the whole purpose of this was to use modules*.

Also I had to add that useless `export default` statement, without it Chrome would complain:

    Uncaught SyntaxError: The requested module &#39;/show.js&#39; does not provide an export named &#39;default&#39;

So what am I missing here?

How to use code from script with type=module

I cannot understand why **in the arrow functions** we do not need to wrap the literal of arrow function in the `({})` braces, instead of in this example the literal just wrapped in the single `()` braces. Why? I had surfed the internet to find an answer on it, but it failed. 

And also why we put the arguments in double braces `({})`, instead of just `()`?

    const FilterLink = ({ filter, children }) =&gt; (
       &lt;NavLink
           to={filter === &#39;SHOW_ALL&#39; ? &#39;/&#39; : `/${ filter }`}
           activeStyle={ {
           textDecoration: &#39;none&#39;,
               color: &#39;black&#39;
           }}
       &gt;
           {children}
       &lt;/NavLink&gt;
    )

Arrow functions and the use of parentheses () or {} or ({})

I&#39;m creating a unit converter, and I want to put all of the conversion functions into their own file. Using ES6 `export`, is there any way to export all of the functions in the file with their default names using only one line? For example: 

`export default all;`

The functions are all just in the file, not within an object. 

How can I export all functions from a file in JS?

I have installed eslint in my machine and i have used visual studio code
i have certain modules and process to be exported
When i try to use &quot;module&quot; or &quot;process&quot; it shows 
it was working fine before.

    [eslint] &#39;module&#39; is not defined. (no-undef)
    [eslint] &#39;process&#39; is not defined. (no-undef)
 and here is my .eslintrc.json

    {

    &quot;env&quot;: {
        &quot;browser&quot;: true,
        &quot;amd&quot;: true

    },
    &quot;parserOptions&quot;: {
        &quot;ecmaVersion&quot;: 6
      },
    &quot;extends&quot;: &quot;eslint:recommended&quot;,
    &quot;rules&quot;: {
        &quot;no-console&quot;: &quot;off&quot;,
        &quot;indent&quot;: [
            &quot;error&quot;,
            &quot;tab&quot;
        ],
        &quot;linebreak-style&quot;: [
            &quot;error&quot;,
            &quot;windows&quot;
        ],
        &quot;quotes&quot;: [
            &quot;error&quot;,
            &quot;single&quot;
        ],
        &quot;semi&quot;: [
            &quot;error&quot;,
            &quot;always&quot;
        ]
    }
   }

I want to remove this error 

    

module is not defined and process is not defined in eslint in visual studio code

I am using airbnb eslint and currently I am getting error:

&gt; error: Line 6 exceeds the maximum line length of 100 (max-len) at
&gt; path/to/file.vue:6:1:

    &lt;template lang=&quot;pug&quot;&gt;
      div
        .container
          .row
            .col-xl-10.mx-auto
              p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
    &lt;/template&gt;

Is there a way to disable lint for paragraph text like above?  
Also, how to increase the line length from 100 to 120?

How to disable eslint rule max line length for paragraph in &lt;template&gt; of vue.js?

As the title says, would it be possible for eslint to show warnings instead of errors on ALL of the rules? I&#39;m using Standard JS, if that information is relevant. 

Thanks!

Is it possible to show warnings instead of errors on ALL of eslint rules?

I am using ESLinter for a simple node project. Below is the only code I have in index.js: 

&lt;!-- language: js --&gt;

    const express = require(&#39;express&#39;);
    const app = express();
    
    app.get(&#39;/&#39;, (req, res) =&gt; {
        res.send({
    	    hi: &#39;there&#39;
        });
    });
    
    const PORT = process.env.PORT || 5000;
    app.listen(PORT);

I am using `VSCode` editor. It automatically runs ESLint for JS code. 

In the IDE, I see below error for last but one line -

    [eslint] &#39;process&#39; is not defined. (no-undef)

Any Idea what&#39;s wrong?


ESLint - &#39;process&#39; is not defined

How do I add a display name to this?

    export default () =&gt;
      &lt;Switch&gt;
        &lt;Route path=&quot;/login&quot; exact component={LoginApp}/&gt;
        &lt;Route path=&quot;/faq&quot; exact component={FAQ}/&gt;
        &lt;Route component={NotFound} /&gt;
      &lt;/Switch&gt;;




Content Type	Original Author	Original Content on Stackoverflow
Question	Phil Mok	View Question on Stackoverflow
Solution 1 - Javascript	Jonas Wilms	View Answer on Stackoverflow

Javascript re-assign let variable with destructuring

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

How can I make use of Error boundaries in functional React components?

react button onClick redirect page

Attributions