You&#39;re probably using the DOM `MouseEvent`. Try using `React.MouseEvent&lt;HTMLInputElement&gt;` instead.

In order to use React MouseEvent just make sure to add:

    import { MouseEvent } from &#39;react&#39;;



You can use SyntheticEvent instead of MouseEvent

Where are the Provisioning Profiles located in Xcode 8.3.3 within the project and/or file directory?  



Xcode Provisioning Profiles Location

I installed Rust using [rustup][1], but when I try to enter a Rust command like `cargo` or `rustc` in my console, the following error appears:

&lt;!-- language: none --&gt;

    error: no default toolchain configured

Is this a known issue?

  [1]: https://www.rust-lang.org/en-US/install.html &quot;rustup&quot;

No default toolchain configured after installing rustup

I have an checkbox TSX(JSX) element:

    &lt;input type=&quot;checkbox&quot; name={i.toString()} onClick={this.handleCheckboxClick} /&gt;

With the help of VS code I know that the input parameter type of the `this.handleCheckboxClick` is `MouseEvent&lt;HTMLInputElement&gt;`. So I implemented it with:

    private handleCheckboxClick(event: MouseEvent&lt;HTMLInputElement&gt;) {
        ...
    }

Then I get an error saying `[ts] Type &#39;MouseEvent&#39; is not generic.` As shown in the image below:

[![enter image description here][1]][1]

Version of my packages:

    &quot;@types/react&quot;: &quot;^15.0.29&quot;,
    &quot;@types/react-dom&quot;: &quot;^15.5.0&quot;,
    &quot;react&quot;: &quot;^15.6.1&quot;,
    &quot;react-dom&quot;: &quot;^15.6.1&quot;,
    &quot;typescript&quot;: &quot;^2.3.4&quot;,

Why is that?


  [1]: https://i.stack.imgur.com/2xdvK.jpg

Why is the `MouseEvent` in the checkbox event handler not generic?

I have an checkbox TSX(JSX) element:
<pre><code class="hljs language-ini">&#x3C;input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} />
</code></pre>
With the help of VS code I know that the input parameter type of the <code>this.handleCheckboxClick</code> is <code>MouseEvent&#x3C;HTMLInputElement></code>. So I implemented it with:
<pre><code class="hljs language-csharp">private handleCheckboxClick(event: MouseEvent&#x3C;HTMLInputElement>) {
 ...
}
</code></pre>
Then I get an error saying <code>[ts] Type 'MouseEvent' is not generic.</code> As shown in the image below:
<a href="https://i.stack.imgur.com/2xdvK.jpg" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/2xdvK.jpg" alt="enter image description here"></a>
Version of my packages:
<pre><code class="hljs language-perl">"@types/react": "^15.0.29",
"@types/react-dom": "^15.5.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"typescript": "^2.3.4",
</code></pre>
Why is that?

I&#39;m trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should be able to use `spyOn` to do this: [spyOn](http://facebook.github.io/jest/docs/jest-object.html#jestspyonobject-methodname).

However, when I try this, I keep getting `TypeError: Cannot read property &#39;_isMockFunction&#39; of undefined` which I take to mean that my spy is undefined. My code looks like this:

    import React, { Component } from &#39;react&#39;;
    import logo from &#39;./logo.svg&#39;;
    import &#39;./App.css&#39;;
    class App extends Component {
    
      myClickFunc = () =&gt; {
          console.log(&#39;clickity clickcty&#39;)
      }
      render() {
        return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;div className=&quot;App-header&quot;&gt;
              &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
              &lt;h2&gt;Welcome to React&lt;/h2&gt;
            &lt;/div&gt;
            &lt;p className=&quot;App-intro&quot; onClick={this.myClickFunc}&gt;
              To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
            &lt;/p&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;


and in my test file:

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import { shallow, mount, render } from &#39;enzyme&#39;

    describe(&#39;my sweet test&#39;, () =&gt; {
     it(&#39;clicks it&#39;, () =&gt; {
        const spy = jest.spyOn(App, &#39;myClickFunc&#39;)
        const app = shallow(&lt;App /&gt;)
        const p = app.find(&#39;.App-intro&#39;)
        p.simulate(&#39;click&#39;)
        expect(spy).toHaveBeenCalled()
     })
    })

Anyone have an insight into what I&#39;m doing wrong?

Jest spyOn function called

**SCENARIO** A user has a dropdown and he selects an option. I want to display that dropdown and make that option a default value which was selected by that user last time.

I am using **selected** attribute on option but React generates a warning asking me to use default value on select. 

For e.g.

    render: function() {
        let option_id = [0, 1];
        let options = [{name: &#39;a&#39;}, {name: &#39;b&#39;}];
        let selectedOptionId = 0

        return (
          &lt;select defaultValue={selectedOptionId}&gt;
            {option_id.map(id =&gt;
            &lt;option key={id} value={id}&gt;{options[id].name}&lt;/option&gt;
            )}
          &lt;/select&gt;
        )
      }
    });

Problem is that I don&#39;t know the **selectedOptionId** as the selected option could be any option. How would I find the **defaultValue** ?


Warning: Use the &#39;defaultValue&#39; or &#39;value&#39; props on &lt;select&gt; instead of setting &#39;selected&#39; on &lt;option&gt;

Is it possible, using the [fetch API][1], to set default headers for every single request?   
What I want to do is set an `Authorization` header whenever there is a json web token in the `localStorage`. My current solution is to set the headers with this function: 
&lt;!-- language: lang-js --&gt;

    export default function setHeaders(headers) {
    	if(localStorage.jwt) {
    		return {
    			...headers,
    			&#39;Authorization&#39;: `Bearer ${localStorage.jwt}`
    		}
    	} else {
    		return headers;
    	}
    }

Setting the headers in a fetch request would then look like this: 

    return fetch(&#39;/someurl&#39;, {
			method: &#39;post&#39;,
			body: JSON.stringify(data),
			headers: setHeaders({
				&#39;Content-Type&#39;: &#39;application/json&#39;
			})
		})


But there has to be a better way to do this. I&#39;m currently developing a React/Redux/Express app if that is of any help.
  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Set default header for every fetch() request

I am trying to find the best table to use with my react apps, and for now, the [react-table][1] offers everything I need (pagination, server-side control, filtering, sorting, footer row).

This being said, I can&#39;t seem to be able to select a row. There are no [examples][2] that show this. 

Some things, that I have tried include trying to set a className on click of the row. But I can&#39;t seem to find the calling element in `e` nor `t`. Also, I don&#39;t like this approach, because it is not how a react app should do things.

    &lt;ReactTable
                ...
                getTrProps={(state, rowInfo, column, instance) =&gt; {
                    return {
                        onClick: (e, t) =&gt; {
                            t.srcElement.classList.add(&#39;active&#39;)
                        },
                        style: {
                        }
                    }
                }}
            /&gt;

Some possible workaround would be to render checkboxes as a first column, but this is not optimal as it limits the area to click to &#39;activate&#39; the row. Also, the visual feedback will be less expressive. 

Am I missing the elephant in the room? And if not, do you know another library that supports the things that I&#39;ve described earlier?

Thank you! 


**EDIT:**
Another option, this being open source, is to suggest an edit. And maybe this is the proper thing to do.

**EDIT 2**

Another thing, suggested by Davorin Ruševljan in the comments, but I couldn&#39;t make it work was:


    onRowClick(e, t, rowInfo) {
        this.setState((oldState) =&gt; {
            let data = oldState.data.slice();
            let copy = Object.assign({},  data[rowInfo.index]);

            copy.selected = true;
            copy.FirstName = &quot;selected&quot;;
            data[rowInfo.index] = copy;

            return {
                data: data,
            }
        })
    }

    ....

                getTrProps={(state, rowInfo, column) =&gt; {
                    return {
                        onClick: (e, t) =&gt; { this.onRowClick(e, t, rowInfo) },
                        style: {
                            background: rowInfo &amp;&amp; rowInfo.row.selected ? &#39;green&#39; : &#39;red&#39;
                        }
                    }
                }}

This sets the &#39;FirstName&#39; column to &#39;selected&#39;, but does not set the class to &#39;green&#39;

  [1]: https://www.npmjs.com/package/react-table
  [2]: https://react-table.js.org/#/story/simple-table

Select row on click react-table

I&#39;d like to import this javascript package in React

    &lt;script src=&quot;https://cdn.dwolla.com/1/dwolla.js&quot;&gt;&lt;/script&gt;

However, there is no NPM package, so I can&#39;t import it as such:

    import dwolla from &#39;dwolla&#39;

or

    import dwolla from &#39;https://cdn.dwolla.com/1/dwolla.js&#39;

so whenver I try

    dwolla.configure(...)

I get an error saying that dwolla is undefined. How do I solve this?

Thanks



How do you import a javascript package from a cdn/script tag in React?

**note:** I&#39;m new to Angular, so please excuse any new comer stupidity here.

**Details**

 - I&#39;ve installed the latest version of Angular CLI
 - The default app loads and runs perfectly fine after &#39;ng serve&#39;

**Issue**

 - I decided to create a new module an import it into the app module 
 - This is something I&#39;ve done a couple of times in Angular 2 and it&#39;s worked perfectly fine
 - However, since I ran the latest version of Angular CLI this morning, importing a module breaks and I receive the following error:

&gt; compiler.es5.js:1689 Uncaught Error: Unexpected directive &#39;ProjectsListComponent&#39; imported by the module &#39;ProjectsModule&#39;. Please add a @NgModule annotation.


**App Module**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule } from &#39;@angular/core&#39;;
    import { AppComponent } from &#39;./app.component&#39;;
    import { AngularFireModule } from &#39;angularfire2&#39;;
    import { AngularFireDatabaseModule } from &#39;angularfire2/database&#39;;
    import { AngularFireAuthModule } from &#39;angularfire2/auth&#39;;
    import { environment } from &#39;../environments/environment&#39;;
    import { ProjectsModule } from &#39;./projects/projects.module&#39;;
    import { HttpModule } from &#39;@angular/http&#39;;


    @NgModule({
      imports: [
        BrowserModule,
        HttpModule,
        ProjectsModule,
        AngularFireModule.initializeApp(environment.firebase, &#39;AngularFireTestOne&#39;), // imports firebase/app needed for everything
        AngularFireDatabaseModule, // imports firebase/database, only needed for database features
        AngularFireAuthModule // imports firebase/auth, only needed for auth features
      ],

      declarations: [AppComponent],

      bootstrap: [AppComponent]

    })

    export class AppModule { }

&lt;!-- end snippet --&gt;

**Projects Module**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule } from &#39;@angular/core&#39;;
    import { ProjectsListComponent } from &#39;./projects-list.component&#39;;
    import { RouterModule } from &#39;@angular/router&#39;;

    @NgModule({

        declarations: [
            ProjectsListComponent
        ],


      imports: [
        BrowserModule,
        ProjectsListComponent,
        RouterModule.forChild([
          { path: &#39;projects&#39;, component: ProjectsListComponent }
        ])
      ]
    })

    export class ProjectsModule { }

&lt;!-- end snippet --&gt;

The process I&#39;ve taken to setting the module up hasn&#39;t been any different to when I was using Angular 2. However, after having issues with compatibility between Angular Cli, firebase and angular fire, I decided to get the latest of everything this morning.

Any help with this one would be massssssively appreciated as I&#39;ve hit a brick wall with my understanding of it all.

Thank you.

Angular CLI - Please add a @NgModule annotation when using latest

I extracted sample template code from [this tutorial](https://github.com/gopinav/Angular-2-Tutorials) and did below two steps to get started - 

1. `npm install // worked fine and created node_modules folder with all dependencies`
2. `npm start`
// failed with below error-
   

        node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class &#39;Subject&lt;T&gt;&#39; 
          incorrectly extends base class &#39;Observable&lt;T&gt;&#39;.
          Types of property &#39;lift&#39; are incompatible.
          Type &#39;&lt;T, R&gt;(operator: Operator&lt;T, R&gt;) =&gt; Observable&lt;T&gt;&#39; is not assignable  
          to type &#39;&lt;R&gt;(operator: Operator&lt;T, R&gt;) =&gt; Observable&lt;R&gt;&#39;.
          Type &#39;Observable&lt;T&gt;&#39; is not assignable to type &#39;Observable&lt;R&gt;&#39;.
          Type &#39;T&#39; is not assignable to type &#39;R&#39;.
          npm ERR! code ELIFECYCLE
          npm ERR! errno 2

I see that in the subject.d.ts declaration of lift is as below -
   

     lift&lt;T, R&gt;(operator: Operator&lt;T, R&gt;): Observable&lt;T&gt;;

And in Observable.ts it is defined as below-
   

     lift&lt;R&gt;(operator: Operator&lt;T, R&gt;): Observable&lt;R&gt; {

Note:-
1. I am new to Angular2 and trying to get hold of things.

2. The error might be due to incompatible definitions of lift method

3. I read through this [github thread](https://github.com/Microsoft/TypeScript/issues/2073) 

4. If I need to install some different version of rxjs then please tell how to uninstall and install the correct rxjs.

**Edit1:** 
I might be a bit late in responding here but I still get the same error even after using *typescript 2.3.4* or *rxjs 6 alpha*. Below is my package.json,

    {
      &quot;name&quot;: &quot;angular-quickstart&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;tsc &amp;&amp; concurrently \&quot;npm run tsc:w\&quot; \&quot;npm run lite\&quot; &quot;,
        &quot;lite&quot;: &quot;lite-server&quot;,
        &quot;postinstall&quot;: &quot;typings install&quot;,
        &quot;tsc&quot;: &quot;tsc&quot;,
        &quot;tsc:w&quot;: &quot;tsc -w&quot;,
        &quot;typings&quot;: &quot;typings&quot;
      },
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;dependencies&quot;: {
        &quot;@angular/common&quot;: &quot;2.0.0&quot;,
        &quot;@angular/compiler&quot;: &quot;2.0.0&quot;,
        &quot;@angular/core&quot;: &quot;2.0.0&quot;,
        &quot;@angular/forms&quot;: &quot;2.0.0&quot;,
        &quot;@angular/http&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;2.0.0&quot;,
        &quot;@angular/router&quot;: &quot;3.0.0&quot;,
        &quot;@angular/upgrade&quot;: &quot;2.0.0&quot;,
        &quot;core-js&quot;: &quot;^2.4.1&quot;,
        &quot;reflect-metadata&quot;: &quot;^0.1.3&quot;,
        &quot;rxjs&quot;: &quot;6.0.0-alpha.0&quot;,
        &quot;systemjs&quot;: &quot;0.19.27&quot;,
        &quot;zone.js&quot;: &quot;^0.6.23&quot;,
        &quot;angular2-in-memory-web-api&quot;: &quot;0.0.20&quot;,
        &quot;bootstrap&quot;: &quot;^3.3.6&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;concurrently&quot;: &quot;^2.2.0&quot;,
        &quot;lite-server&quot;: &quot;^2.2.2&quot;,
        &quot;typescript&quot;: &quot;2.3.4&quot;,
        &quot;typings&quot;: &quot;^1.3.2&quot;
      }
    }

rxjs/Subject.d.ts error : Class &#39;Subject&lt;T&gt;&#39; incorrectly extends base class &#39;Observable&lt;T&gt;&#39;

I have array of two objects:

    genericItems: Item[] = [];
    backupData: Item[] = [];

I am populating my HTML table with `genericItems`data. The table is modifiable. There is a reset button to undo all changes done with `backUpData`. This array is populated by a service:

    getGenericItems(selected: Item) {
    this.itemService.getGenericItems(selected).subscribe(
      result =&gt; {
         this.genericItems = result;
      });
         this.backupData = this.genericItems.slice();
      }
My idea was that, the user changes will get reflected in first array and second array can be used as backup for reset operation. The issue I am facing here is when the user modifies the table (`genericItems[])` the second array `backupData` also gets modified.

How is this happening and how to prevent this?


Cloning an array in Javascript/Typescript

I am building an angular 4 application. I am getting error

    Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

I have created HomeModule and HomeComponent. Which one do I need to refer to the AppModule? I am a bit confused. Do I need to refer HomeModule or HomeComponent? Ultimately what I am looking for is when the user clicks the Home menu, he should be directed to the home.component.html which will be rendered on the index page.

App.module is:

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule } from &#39;@angular/core&#39;;
    import { FormsModule } from &#39;@angular/forms&#39;;
    import { HttpModule } from &#39;@angular/http&#39;
    
    import { AppComponent } from &#39;./app.component&#39;;
    import { NavbarComponent } from &#39;./navbar/navbar.component&#39;;
    import { TopbarComponent } from &#39;./topbar/topbar.component&#39;;
    import { FooterbarComponent } from &#39;./footerbar/footerbar.component&#39;;
    import { MRDBGlobalConstants } from &#39;./shared/mrdb.global.constants&#39;;
    import { AppRoutingModule } from &#39;./app.routing&#39;;
    import { HomeModule } from &#39;./Home/home.module&#39;;
    
    @NgModule({
      declarations: [
        AppComponent,
        FooterbarComponent,
        TopbarComponent,
        NavbarComponent
        
      ],
      imports: [
        BrowserModule,
        HttpModule,
        AppRoutingModule,
        HomeModule
        
      ],
      providers: [MRDBGlobalConstants],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

HomeModule is:

    import { NgModule } from &#39;@angular/core&#39;;
    import { CommonModule } from &#39;@angular/common&#39;;
    import { HomeComponent } from &#39;./home.component&#39;;
    
    @NgModule({
      imports: [
        CommonModule
      ],
      exports: [HomeComponent],
      declarations: [HomeComponent]
    })
    export class HomeModule { }

HomeComponent is:

    import { Component, OnInit } from &#39;@angular/core&#39;;
    
    @Component({
      selector: &#39;app-home&#39;,
      templateUrl: &#39;./home.component.html&#39;,
      styleUrls: [&#39;./home.component.css&#39;]
    })
    export class HomeComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }

Component is not part of any NgModule or the module has not been imported into your module

Angular 1 does not accept `onchange()` event, it&#39;s only accepts `ng-change()` event. 

Angular 2, on the other hand, accepts both `(change)` and `(ngModelChange)` events, which both seems to be doing the same thing. 

What&#39;s the difference? 

which one is best for performance?

**ngModelChange**:

    &lt;input type=&quot;text&quot; pInputText class=&quot;ui-widget ui-text&quot;
        (ngModelChange)=&quot;clearFilter()&quot; placeholder=&quot;Find&quot;/&gt;

vs **change**:

    &lt;input type=&quot;text&quot; pInputText class=&quot;ui-widget ui-text&quot; 
        (change)=&quot;clearFilter()&quot; placeholder=&quot;Find&quot;/&gt;

(change) vs (ngModelChange) in angular

I&#39;m attempting to make a control where you can both select a file to submit in the form and drop a file into it to do the same thing. I have something like this where it will also show a preview of the file if it&#39;s an image:

    &lt;div class=&quot;preview-image-container&quot;&gt;

      &lt;input type=&quot;file&quot; name=&quot;File&quot; id=&quot;File&quot; accept=&quot;image/*&quot; 
             class=&quot;image-url form-control&quot; style=&quot;display:none;&quot; /&gt;

      &lt;div class=&quot;preview-image-dummy&quot;&gt;&lt;/div&gt;&lt;img class=&quot;preview-image-url&quot; /&gt;
      &lt;div class=&quot;preview-image-instruction&quot;&gt;
        &lt;div class=&quot;preview-image-btn-browse btn btn-primary&quot;&gt;Select file&lt;/div&gt;
        &lt;p&gt;or drop it here.&lt;/p&gt;
      &lt;/div&gt;

    &lt;/div&gt;

[Here&#39;s a fiddle with MCVE][1].

The user drops the file in the `preview-image-container`. The file isn&#39;t submitted with AJAX, the user needs to submit the form which contain more data.

For security reasons, we aren&#39;t allowed to change the value of the input file with JavaScript. However, I know that the default input file support droppable and there&#39;s a bunch of websites that let us select files by dropping them in the form so my guess is that there&#39;s a way to do it.

As you can see from the MCVE, I am only interested in using **jQuery or pure JavaScript** without additional libraries.

Although *dropzone.js* could be used, it doesn&#39;t fit in my requirements and it would require a considerate amount of time to customize its look. Moreover, *dropzone.js* have certain configuration requirements that can&#39;t be met within my ASP.NET application.

-----

There&#39;s a similar question but does not have a proper answer:&lt;br&gt; https://stackoverflow.com/q/21983389/584192

Also not similar to https://stackoverflow.com/q/25092981/584192 because I have already achieved drag-drop and preview action. **My question is specific to the problem of having an empty file input when dropping the file in a parent container.**

  [1]: https://jsfiddle.net/12q709b4/8/

How to set file input value when dropping file on page?

In my scenario I have mouseover and mouseout events that I want to bind to conditionally (e.g only if user is on a device that has a mouse). 

I realize I can have the condition in the event handler itself but that would still be allocating the memory for the event handlers which is unnecessary. 

Is there a way to make the **event binding itself** conditional? 

(to be clear, what I&#39;d like is to be able to short-circuit the event subscription so the underlying addEventListener operation never happens if the condition is false)

Conditional event binding - vuejs

This [question][1] has been asked so many times, and it seemed to work for others, however, I am getting `NaN` values when I copy a column from a different DataFrame(`df1` and `df2` are same length). 

`df1`

            date	 hour	   var1
    a	2017-05-01	00:00:00   456585
    b	2017-05-01	01:00:00   899875
    c	2017-05-01	02:00:00   569566
    d	2017-05-01	03:00:00   458756
    e	2017-05-01	04:00:00   231458
    f	2017-05-01	05:00:00   986545

`df2`

          MyVar1	 MyVar2	
     0	6169.719338	3688.045368
     1	5861.148007	3152.238704
     2	5797.053347	2700.469871
     3	5779.102340	2730.471948
     4	6708.219647	3181.298291
     5	8550.380343	3793.580394

I need like this in my `df2`

           MyVar1	 MyVar2	       date        hour
     0	6169.719338	3688.045368  2017-05-01  00:00:00
     1	5861.148007	3152.238704  2017-05-01  01:00:00
     2	5797.053347	2700.469871  2017-05-01  02:00:00
     3	5779.102340	2730.471948  2017-05-01  03:00:00
     4	6708.219647	3181.298291  2017-05-01  04:00:00
     5	8550.380343	3793.580394  2017-05-01  05:00:00

I tried the following,

    df2[&#39;date&#39;] = df1[&#39;date&#39;]
    df2[&#39;hour&#39;] = df1[&#39;hour&#39;]
     
    type(df1)
    &gt;&gt; pandas.core.frame.DataFrame

    type(df2)
    &gt;&gt; pandas.core.frame.DataFrame

I am getting the following,

           MyVar1	 MyVar2	     date       hour
     0	6169.719338	3688.045368  NaN        NaN
     1	5861.148007	3152.238704  NaN        NaN
     2	5797.053347	2700.469871  NaN        NaN

Why is this happening? There is another [post][2] that discusses `merge`, but I just need to copy it. Any help would be appreciated.  


  [1]: https://stackoverflow.com/questions/38961170/pandas-add-values-of-column-to-different-dataframe
  [2]: https://stackoverflow.com/questions/38572583/copy-values-from-one-dataframe-to-another-dataframedifferent-length-by-compari

Copying a column from one DataFrame to another gives NaN values?

Suppose I have two enums as described below in Typescript, then How do I merge them

    enum Mammals {
        Humans,
        Bats,
        Dolphins
    }

    enum Reptiles {
        Snakes,
        Alligators,
        Lizards
    }

    export default Mammals &amp; Reptiles // For Illustration purpose, Consider both the Enums have been merged.

Now, when I `import` the `exported value` in another file, I should be able to access values from both the enums.  

    import animalTypes from &quot;./animalTypes&quot;
    
    animalTypes.Humans //valid
    
    animalTypes.Snakes // valid


How can I achieve such functionality in TypeScript?


How to merge two enums in TypeScript

For example, a `Pet` is an `Animal` with an `owner` and `name`.

    type Animal {
      species: String
    }
    
    type Pet extends Animal {
      owner: Owner
      name: String
    }



How do you extend types in GraphQL?

I&#39;m using [mypy](http://mypy-lang.org/) in my python project for type checking. I&#39;m also using PyYAML for reading and writing the project configuration files. Unfortunately, when using the [recommended import mechanism from the PyYAML documentation](http://pyyaml.org/wiki/PyYAMLDocumentation) this generates a spurious error in a try/except clause that attempts to import native libraries:

    from yaml import load, dump
    try:
        from yaml import CLoader as Loader, CDumper as Dumper
    except ImportError:
        from yaml import Loader, Dumper

On my system `CLoader` and `CDumper` aren&#39;t present, which results in the errors `error: Module &#39;yaml&#39; has no attribute &#39;CLoader&#39;` and `error: Module &#39;yaml&#39; has no attribute &#39;CDumper&#39;`.

Is there a way to have mypy ignore errors on this line? I was hoping that I could do something like this to have mypy skip that line:

    from yaml import load, dump
    try:
        from yaml import CLoader as Loader, CDumper as Dumper  # nomypy
    except ImportError:
        from yaml import Loader, Dumper


How can mypy ignore a single line in a source file?

I want to be able to assign an object property to a value given a key and value as inputs yet still be able to determine the type of the value. It&#39;s a bit hard to explain so this code should reveal the problem:


    type JWT = { id: string, token: string, expire: Date };
    const obj: JWT = { id: &#39;abc123&#39;, token: &#39;tk01&#39;, expire: new Date(2018, 2, 14) };

    function print(key: keyof JWT) {
        switch (key) {
            case &#39;id&#39;:
            case &#39;token&#39;:
                console.log(obj[key].toUpperCase());
                break;
            case &#39;expire&#39;:
                console.log(obj[key].toISOString());
                break;
        }
    }

    function onChange(key: keyof JWT, value: any) {
        switch (key) {
            case &#39;id&#39;:
            case &#39;token&#39;:
                obj[key] = value + &#39; (assigned)&#39;;
                break;
            case &#39;expire&#39;:
                obj[key] = value;
                break;
        }
    }

    print(&#39;id&#39;);
    print(&#39;expire&#39;);
    onChange(&#39;id&#39;, &#39;def456&#39;);
    onChange(&#39;expire&#39;, new Date(2018, 3, 14));
    print(&#39;id&#39;);
    print(&#39;expire&#39;);

    onChange(&#39;expire&#39;, 1337); // should fail here at compile time
    print(&#39;expire&#39;); // actually fails here at run time



I tried changing `value: any` to `value: valueof JWT` but that didn&#39;t work.

Ideally, `onChange(&#39;expire&#39;, 1337)` would fail because `1337` is not a Date type.

How can I change `value: any` to be the value of the given key?

Is there a `valueof` similar to `keyof` in TypeScript?

I&#39;ve the following snippet in my index.js

```
class App extends Component {
    render() {
        return ( &lt;div style = { styles.app } &gt;
            Welcome to React!
            &lt;/div&gt;
        )
    }
}
```
&lt;br&gt;
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:

```
class App extends Component {
    render() {
        return ( &lt; div style = { styles.app } &gt;
            Welcome to React!
            &lt;
            /div&gt;
        )
    }
}
```

How can I solve this? thanks


Visual studio code changes format (React-JSX)

I am trying to fix this lint error at line `const def = (props) =&gt; {` in following sample code.

    const propTypes = {
    prop1: PropTypes.string,
    prop2: PropTypes.string,
    prop3: PropTypes.string,
    prop4: PropTypes.string,
    prop5: PropTypes.string,
    }
    
    const abc = (props) =&gt; {
    some code here }
    
    const def = (props) =&gt; {
    &lt;div&gt;
    &lt;div className=&quot; ..some classes..&quot;&gt;{abc}&lt;/div&gt;
    &lt;div className=&quot; ..some classes..&quot;&gt;{t(&#39;translation/something&#39;)}&lt;/div&gt;
    
    &lt;div ...&gt;
      &lt;someComponent 
        do something
      /&gt;
    
    if (some condition) {
    do this
    } else {
    do that
    }
    
    &lt;/div&gt;

    };

Any idea why i am getting this lint error?

React: Expected an assignment or function call and instead saw an expression

There is something I find very confusing when working in `React.js`. 

There are plenty of examples available on internet which use `.js` files with `React` but many others use `.jsx` files. 

I have read about `JSX` files and my understanding is that they just let you write `HTML` tags within your `JavaScript`. 
But the same thing can be written in `JS` files as well. 

So what is the actual difference between `.js` and `.jsx` ?

ReactJS - .JS vs .JSX

I&#39;m trying to integrate TypeScript into our project and so far I stumbled upon one issue with [styled-components][1] library.

Consider this component

    import * as React from &quot;react&quot;;
    import styled from &quot;styled-components/native&quot;;
    import { TouchableOpacity } from &quot;react-native&quot;;
    
    // -- types ----------------------------------------------------------------- //
    export interface Props {
      onPress: any;
      src: any;
      width: string;
      height: string;
    }
    
    // -- styling --------------------------------------------------------------- //
    const Icon = styled.Image`
      width: ${(p: Props) =&gt; p.width};
      height: ${(p: Props) =&gt; p.height};
    `;
    
    class TouchableIcon extends React.Component&lt;Props&gt; {
      // -- default props ------------------------------------------------------- //
      static defaultProps: Partial&lt;Props&gt; = {
        src: null,
        width: &quot;20px&quot;,
        height: &quot;20px&quot;
      };
    
      // -- render -------------------------------------------------------------- //
      render() {
        const { onPress, src, width, height } = this.props;
        return (
          &lt;TouchableOpacity onPress={onPress}&gt;
            &lt;Icon source={src} width={width} height={height} /&gt;
          &lt;/TouchableOpacity&gt;
        );
      }
    }
    
    export default TouchableIcon;

Following line throws 3 errors, that are same in nature `&lt;Icon source={src} width={width} height={height} /&gt;`

&gt; Type {source: any; width: string; height: string;} is not assignable
&gt; to type IntrinsicAttributes ... Property &#39;onPress&#39; is missing in type
&gt; {source: any; width: string; height: string;}

Not entirely sure what this is and how to fix it, do I somehow need to declare these on `Icon` or something of this sort?

**EDIT:** typescript `v2.6.1`, styled-components `v2.2.3`

  [1]: https://www.styled-components.com/

Using styled-components with props and TypeScript

I&#39;m trying to set up react-router in an example application, and I&#39;m getting the following error:

    You should not use &lt;Link&gt; outside a &lt;Router&gt;

My app is set up like so:

### Parent component
&lt;!-- language-all: lang-jsx --&gt;

    const router = (
      &lt;div className=&quot;sans-serif&quot;&gt;
        &lt;Router histpry={browserHistory}&gt;
          &lt;Route path=&quot;/&quot; component={Main}&gt;
            &lt;IndexRoute component={PhotoGrid}&gt;&lt;/IndexRoute&gt;
            &lt;Route path=&quot;/view/:postId&quot; component={Single}&gt;&lt;/Route&gt;
          &lt;/Route&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
    
    render(&lt;Main /&gt;, document.getElementById(&#39;root&#39;));



### Child/`Main` component


    export default () =&gt; (
      &lt;div&gt;
        &lt;h1&gt;
          &lt;Link to=&quot;/&quot;&gt;Redux example&lt;/Link&gt;
        &lt;/h1&gt;
      &lt;/div&gt;
    )

Any idea what I&#39;m doing wrong here?

[Here&#39;s a Sandbox link](https://codesandbox.io/s/zwvjpx4pjx) to demonstrate the problem.


Content Type	Original Author	Original Content on Stackoverflow
Question	Ben	View Question on Stackoverflow
Solution 1 - Reactjs	rossipedia	View Answer on Stackoverflow
Solution 2 - Reactjs	Guy Engel	View Answer on Stackoverflow
Solution 3 - Reactjs	Sras	View Answer on Stackoverflow

Why is the `MouseEvent` in the checkbox event handler not generic?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

No default toolchain configured after installing rustup

Xcode Provisioning Profiles Location

Attributions