The [statement from Microsoft][1] regarding the end of Internet Explorer 11 support mentions that it will continue to receive security updates, compatibility fixes, and technical support until its [end of life][2]. The wording of this statement leads me to believe that Microsoft has no plans to continue adding features to Internet Explorer 11, and instead will be focusing on Edge.

If you require ES6 features in Internet Explorer 11, check out a transpiler such as [Babel][3].


  [1]: https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support
  [2]: https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer
  [3]: http://babeljs.io/

Updated for TypeScript 2.1
====

[TypeScript 2.1 now supports object spread/rest][1], so no workarounds are needed anymore!

----------


Original Question
----

TypeScript supports [JSX spread attributes][2] which is commonly used in React to pass HTML attributes from a component to a rendered HTML element:

    interface LinkProps extends React.HTMLAttributes {
      textToDisplay: string;
    }
    
    class Link extends React.Component&lt;LinkProps, {}&gt; {
      public render():JSX.Element {
        return (
          &lt;a {...this.props}&gt;{this.props.textToDisplay}&lt;/a&gt;
        );
      }
    }

    &lt;Link textToDisplay=&quot;Search&quot; href=&quot;http://google.com&quot; /&gt;

However, React introduced a [warning if you pass any unknown props to an HTML element][3]. The above example would produce a React runtime warning that `textToDisplay` is an unknown prop of `&lt;a&gt;`. The suggested solution for a case like this example is to use [object rest properties][4] to extract out your custom props and use the rest for the JSX spread attributes:

    const {textToDisplay, ...htmlProps} = this.props;
    return (
      &lt;a {...htmlProps}&gt;{textToDisplay}&lt;/a&gt;
    );

&lt;s&gt;But TypeScript does not yet support this syntax. I know that hopefully some day [we will be able to do this in TypeScript][5].&lt;/s&gt; (***Update**: [TS 2.1 now supports object spread/rest][1]! Why are you still reading this??*) In the meantime what are some workarounds? I&#39;m looking for a solution that doesn&#39;t compromise type-safety and finding it surprisingly difficult. For example I could do this:

    const customProps = [&quot;textDoDisplay&quot;, &quot;otherCustomProp&quot;, &quot;etc&quot;];
    const htmlProps:HTMLAttributes = Object.assign({}, this.props);
    customProps.forEach(prop =&gt; delete htmlProps[prop]);

But this requires the use of string property names that are not validated against the actual props and thus prone to typos and bad IDE support. Is there a better way we can do this?


  [1]: https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#object-spread-and-rest
  [2]: https://facebook.github.io/react/docs/jsx-spread.html
  [3]: https://facebook.github.io/react/warnings/unknown-prop.html
  [4]: https://github.com/sebmarkbage/ecmascript-rest-spread
  [5]: https://github.com/Microsoft/TypeScript/issues/4928

TypeScript workaround for rest props in React

This may duplicate with previous topics but I can&#39;t find what I really need.

I want to get a first three characters of a string. For example:

    var str = &#39;012123&#39;;
    console.info(str.substring(0,3));  //012

I want the output of this string &#39;012&#39; but I don&#39;t want to use subString or something similar to it because I need to use the original string for appending more characters &#39;45&#39;. With substring it will output 01245 but what I need is 01212345.


Javascript How to get first three characters of a string

According to this page http://kangax.github.io/compat-table/es6/, ES6 features are not implemented in IE 11. 

Does IE 11 have a plan for implementing them one day or can I forget about it?
Is there a page that explain their intent on that subject?

I read somewhere (I cannot remember where exactly) that they don&#39;t plan to fix bugs in IE 11, so my guess is that they won&#39;t bother implement new features?

Support for ES6 in Internet Explorer 11

According to this page <a href="http://kangax.github.io/compat-table/es6/" target="_blank" rel="noopener noreferrer">http://kangax.github.io/compat-table/es6/</a>, ES6 features are not implemented in IE 11.
Does IE 11 have a plan for implementing them one day or can I forget about it?
Is there a page that explain their intent on that subject?
I read somewhere (I cannot remember where exactly) that they don't plan to fix bugs in IE 11, so my guess is that they won't bother implement new features?

Having googled for it I found two solutions:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

        var data = [...Array(10).keys()];
    console.log(data);
        var data1 = Array(8).fill().map((_, i) =&gt; i);
    console.log(data1);


&lt;!-- end snippet --&gt;

data1 displays [0, 1, ..., 7] however data just displays [[object Array Iterator]] how do I actually see the numbers. 

I need it for some iterations over numbers (part of Euler project).

Previously I did a lot of Euler challenges in Python. Now I decided I&#39;ll revisit it and do as much as I can in JS (as much ES6 syntax as possible) to help me develop my js skills.

ES6 - generate an array of numbers

I want to use `aria-expanded=&quot;true&quot;` to change a css property like an active class :

    &lt;li class=&quot;active&quot;&gt;
       &lt;a href=&quot;#3a&quot; class=&quot;btn btn-default btn-lg&quot; data-toggle=&quot;tab&quot; aria-expanded=&quot;true&quot;&gt; 
           &lt;span class=&quot;network-name&quot;&gt;Google+&lt;/span&gt;
       &lt;/a&gt;
    &lt;/li&gt;

I want the `&lt;a&gt;` to `background-color: #42DCA3` but only when `aria-expanded=&quot;true&quot;`.

How to use aria-expanded=&quot;true&quot; to change a css property

I have a project who I didn&#39;t touch for 2 weeks. I take it back and now when I try to run `npm start` I got this error.

    &gt; react-scripts start
    
    sh: react-scripts: command not found
    
    npm ERR! Darwin 16.0.0
    npm ERR! argv &quot;/usr/local/bin/node&quot; &quot;/usr/local/bin/npm&quot; &quot;start&quot;
    npm ERR! node v6.7.0
    npm ERR! npm  v3.10.3
    npm ERR! file sh
    npm ERR! code ELIFECYCLE
    npm ERR! errno ENOENT
    npm ERR! syscall spawn
    npm ERR! UpScore@0.6.0 start: `react-scripts start`
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the UpScore@0.6.0 start script &#39;react-scripts start&#39;.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the UpScore package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     react-scripts start
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs UpScore
    npm ERR! Or if that isn&#39;t available, you can get their info via:
    npm ERR!     npm owner ls UpScore
    npm ERR! There is likely additional logging output above.

- node 6.7.0
- npm 3.10.3
- mac sierra 10.12

package.json

    {
      &quot;name&quot;: &quot;UpScore&quot;,
      &quot;version&quot;: &quot;0.6.0&quot;,
      &quot;private&quot;: true,
      &quot;devDependencies&quot;: {
        &quot;react-addons-test-utils&quot;: &quot;^15.3.1&quot;,
        &quot;react-scripts&quot;: &quot;0.4.1&quot;,
        &quot;react-test-renderer&quot;: &quot;^15.3.1&quot;,
        &quot;redux-logger&quot;: &quot;^2.6.1&quot;
      },
      &quot;dependencies&quot;: {
        &quot;@yoshokatana/medium-button&quot;: &quot;^1.1.0&quot;,
        &quot;axios&quot;: &quot;^0.14.0&quot;,
        &quot;bcrypt&quot;: &quot;^0.8.7&quot;,
        &quot;bcrypt-nodejs&quot;: &quot;0.0.3&quot;,
        &quot;bcryptjs&quot;: &quot;^2.3.0&quot;,
        &quot;body-parser&quot;: &quot;^1.15.2&quot;,
        &quot;connect-flash&quot;: &quot;^0.1.1&quot;,
        &quot;cookie-parser&quot;: &quot;^1.4.3&quot;,
        &quot;draft-js&quot;: &quot;^0.8.1&quot;,
        &quot;draft-js-editor&quot;: &quot;^1.7.2&quot;,
        &quot;draft-js-export-html&quot;: &quot;^0.4.0&quot;,
        &quot;ejs&quot;: &quot;^2.5.2&quot;,
        &quot;email-verification&quot;: &quot;^0.4.5&quot;,
        &quot;express&quot;: &quot;^4.14.0&quot;,
        &quot;express-session&quot;: &quot;^1.14.1&quot;,
        &quot;flexboxgrid&quot;: &quot;^6.3.1&quot;,
        &quot;highlight.js&quot;: &quot;^9.6.0&quot;,
        &quot;immutable&quot;: &quot;^3.8.1&quot;,
        &quot;katex&quot;: &quot;^0.6.0&quot;,
        &quot;lodash&quot;: &quot;^4.15.0&quot;,
        &quot;markdown-it-mathjax&quot;: &quot;^1.0.3&quot;,
        &quot;material-ui&quot;: &quot;^0.15.4&quot;,
        &quot;medium-editor&quot;: &quot;^5.22.0&quot;,
        &quot;minutes-seconds-milliseconds&quot;: &quot;^1.0.3&quot;,
        &quot;moment&quot;: &quot;^2.15.0&quot;,
        &quot;moment-duration-format&quot;: &quot;^1.3.0&quot;,
        &quot;mongod&quot;: &quot;^1.3.0&quot;,
        &quot;mongodb&quot;: &quot;^2.2.9&quot;,
        &quot;mongoose&quot;: &quot;^4.6.0&quot;,
        &quot;monk&quot;: &quot;^3.1.2&quot;,
        &quot;morgan&quot;: &quot;^1.7.0&quot;,
        &quot;normalize.css&quot;: &quot;^3.0.3&quot;,
        &quot;passport&quot;: &quot;^0.3.2&quot;,
        &quot;passport-local&quot;: &quot;^1.0.0&quot;,
        &quot;react&quot;: &quot;^15.3.1&quot;,
        &quot;react-dom&quot;: &quot;^15.3.1&quot;,
        &quot;react-markdown&quot;: &quot;^2.4.2&quot;,
        &quot;react-medium-editor&quot;: &quot;^1.8.1&quot;,
        &quot;react-redux&quot;: &quot;^4.4.5&quot;,
        &quot;react-redux-form&quot;: &quot;^0.14.5&quot;,
        &quot;react-rich-markdown&quot;: &quot;^1.0.1&quot;,
        &quot;react-router&quot;: &quot;^2.7.0&quot;,
        &quot;react-router-redux&quot;: &quot;^4.0.5&quot;,
        &quot;react-tap-event-plugin&quot;: &quot;^1.0.0&quot;,
        &quot;react-tinymce&quot;: &quot;^0.5.1&quot;,
        &quot;redux&quot;: &quot;^3.6.0&quot;,
        &quot;redux-form&quot;: &quot;^6.0.5&quot;,
        &quot;redux-form-material-ui&quot;: &quot;^4.0.1&quot;,
        &quot;redux-promise-middleware&quot;: &quot;^4.0.0&quot;,
        &quot;redux-thunk&quot;: &quot;^2.1.0&quot;,
        &quot;reselect&quot;: &quot;^2.5.3&quot;,
        &quot;screenfull&quot;: &quot;^3.0.2&quot;
      },
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-scripts start&quot;,
        &quot;start:prod&quot;: &quot;pushstate-server build&quot;,
        &quot;build&quot;: &quot;react-scripts build&quot;,
        &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;,
        &quot;server&quot;: &quot;cd client/api &amp;&amp; pm2 start server.js --watch&quot;,
        &quot;proxy&quot;: &quot;http://128.199.139.144:3000&quot;
      },
      &quot;eslintConfig&quot;: {
        &quot;extends&quot;: &quot;./node_modules/react-scripts/config/eslint.js&quot;
      }
    }


I try to clone my repos too and get the same error. If someone can give me some way to find what happen. Thank you


npm start error with create-react-app

I have a graphql schema, a fragment of which looks like this:

    type User {
        username: String!
        password: String!
    }

In graphiql, there is a description field, but it always says &quot;self-descriptive&quot;. How do I add descriptions to the schema? 

How do I add a description to a field in &quot;GraphQL schema language&quot;

I have a seemingly trivial question about props and functional components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless functional component that houses some input fields which need to connect to functions living inside the container component. 

My question: How can I use the functions living inside the parent component to change state while the user is interacting with form fields inside the stateless Modal component? Am I passing down props incorrectly? Thanks in advance.

**Container**

    export default class LookupForm extends Component {
    	constructor(props) {
    		super(props);
    		
    		this.state = {
    			showModal: false
    		};
    	}
    	render() {
    		let close = () =&gt; this.setState({ showModal: false });
    
    		return (
                ... // other JSX syntax
                &lt;CreateProfile fields={this.props} show={this.state.showModal} onHide={close} /&gt;
            );
        }

        firstNameChange(e) {
		  Actions.firstNameChange(e.target.value);
	    }
    };

**Functional (Modal) Component**

    const CreateProfile = ({ fields }) =&gt; {
      console.log(fields);
      return (
          ... // other JSX syntax
          
          &lt;Modal.Body&gt;
            &lt;Panel&gt;
              &lt;div className=&quot;entry-form&quot;&gt;
                &lt;FormGroup&gt;
                  &lt;ControlLabel&gt;First Name&lt;/ControlLabel&gt;
                  &lt;FormControl type=&quot;text&quot;
                    onChange={fields.firstNameChange} placeholder=&quot;Jane&quot;
                    /&gt;
                &lt;/FormGroup&gt;
      );
    };

Example: say I want to call `this.firstNameChange` from within the Modal component. I guess the &quot;destructuring&quot; syntax of passing props to a functional component has got me a bit confused. i.e:

`const SomeComponent = ({ someProps }) = &gt; { // ... };`

React: Passing down props to functional components

Below piece of code does not work in IE 11, it throws a syntax error in the console 

    g.selectAll(&quot;.mainBars&quot;)
        .append(&quot;text&quot;)
        .attr(&quot;x&quot;, d =&gt; (d.part == &quot;primary&quot; ? -40 : 40))
        .attr(&quot;y&quot;, d =&gt; +6)
        .text(d =&gt; d.key)
        .attr(&quot;text-anchor&quot;, d =&gt; (d.part == &quot;primary&quot; ? &quot;end&quot; : &quot;start&quot;));

Using `d3.js` bipartite chart for visualization

This code causing the issue in above statement `d=&gt;(d.part==&quot;primary&quot;? -40: 40)`



Why doesn&#39;t this arrow function work in IE 11?

I&#39;m looking for an alternative version for the `Object.values()` function.  
As [described here][1] the function is not supported in Internet Explorer.

When executing the following example code:

    var obj = { foo: &#39;bar&#39;, baz: 42 };
    console.log(Object.values(obj)); // [&#39;bar&#39;, 42]

It works in both, Firefox and Chrome, but throws the following error in IE11:

&gt; Object doesn&#39;t support property or method &quot;values&quot;

Here you can test it: [Fiddle][2].

So, what would be a quick fix?


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
  [2]: https://jsfiddle.net/faxntykn/

Alternative version for Object.values()

I am building a Angular4 project using Angular CLI (1.1.2). It runs perfectly in Chrome (Version 59.0.3071.115) and firefox(54.0.1) but when I tried to use IE11 (Verison 11.0.9600.18738) nothings shows up and when I open the develper mode in IE, it shows me the following Error:

    SCRIPT5022: Exception thrown and not caught
    File: polyfills.bundle.js, Line: 829, Column: 34

And the detailed Error message is following:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/O2L2B.png


Anyone knows how to solve this problem?

Thanks!

Angular4 Application running issues in IE11

I&#39;m currently developing a web application in Outsystems in which I have the need to customize the CSS, in which I&#39;m using variables. I need to guarantee the app works cross-browser, including in Internet Explorer. IE doesn&#39;t support CSS variables, as you can see in the picture below from [this source][1].

[![][2]][2]

Since I have to use CSS variables, is there any workaround for the usage of variables in IE?

  [1]: https://caniuse.com/#feat=css-variables
  [2]: https://i.stack.imgur.com/Cz3ea.png

Workaround for CSS variables in IE?

I have an issue with IE 11 and my react app. I use Webpack, babel and polyfill.io cdn and all is nice until rendering bundeled file, then it stops doing anything.
Do you have any idea what may go wrong?

Thanks in advance.

Why IE 11 display blank page rendering react app

I&#39;m using following HTML markup for my grid.

    &lt;section class=&quot;grid&quot;&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
        &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

The SCSS code is something like below:

    .grid {
    	display: grid;
    	grid-template-columns: repeat( 4, 1fr );
    	grid-gap: 30px;
    	align-items: start;
    
    	.grid-item {
    		&amp;.height-2x {
    			grid-row: span 2;
    		}
    		&amp;.width-2x {
    			grid-column: span 2;
    		}
    	}
    }

Since I&#39;m using auto-prefixer in my workflow it automatically adds all relevant properties with `-ms` prefix. I can confirm it via inspect element.

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to [this site][1] these browsers support CSS Grid layout with `-ms` prefix. I&#39;ve created a CodePen for this scenario.

[CodePen Link][2]

Why is it not working?

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .grid {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
      -ms-grid-rows: (270px)[4];
      grid-template-rows: repeat(4, 270px);
      grid-gap: 30px;
    }

    .grid .grid-item {
      background-color: #000;
      color: #fff;
      text-align: center;
      line-height: 270px;
    }

    .grid .grid-item.height-2x {
      -ms-grid-row: span 2;
      grid-row: span 2;
    }

    .grid .grid-item.width-2x {
      -ms-grid-column: span 2;
      grid-column: span 2;
    }

&lt;!-- language: lang-html --&gt;

    &lt;section class=&quot;grid&quot;&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item height-2x&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item&quot;&gt;....&lt;/article&gt;
      &lt;article class=&quot;grid-item width-2x height-2x&quot;&gt;....&lt;/article&gt;
    &lt;/section&gt;

&lt;!-- end snippet --&gt;


  [1]: http://caniuse.com/#feat=css-grid
  [2]: https://codepen.io/imfaisal/full/rzdzqN/

CSS Grid Layout not working in IE11 even with prefixes

I&#39;m developing a webpage in a mixed web browser environment (Chrome/IE11). 
IE11 doesn&#39;t support CSS variables, is there a polyfill or script that exists that would allow me to use CSS variables in IE11?


Content Type	Original Author	Original Content on Stackoverflow
Question	ling	View Question on Stackoverflow
Solution 1 - Javascript	A. Bandtock	View Answer on Stackoverflow

Support for ES6 in Internet Explorer 11

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Javascript How to get first three characters of a string

TypeScript workaround for rest props in React

Attributions