You must use `htmlFor` attribute instead

    &lt;label htmlFor=&quot;recipient-name&quot; className=&quot;control-label&quot;&gt;Recipient:&lt;/label&gt;

`for` is a keyword in javascript so in JSX you can&#39;t use it. You must use `htmlFor` which is translated into `for` attribute once it is rendered to the DOM.

I have a dataframe that looks like the following

       color  x   y
    0    red  0   0
    1    red  1   1
    2    red  2   2
    3    red  3   3
    4    red  4   4
    5    red  5   5
    6    red  6   6
    7    red  7   7
    8    red  8   8
    9    red  9   9
    10  blue  0   0
    11  blue  1   1
    12  blue  2   4
    13  blue  3   9
    14  blue  4  16
    15  blue  5  25
    16  blue  6  36
    17  blue  7  49
    18  blue  8  64
    19  blue  9  81

I ultimately want two lines, one blue, one red.  The red line should essentially be y=x and the blue line should be y=x^2

When I do the following:

    df.plot(x=&#39;x&#39;, y=&#39;y&#39;)

The output is this:

![][1]

Is there a way to make pandas know that there are two sets?  And group them accordingly.  I&#39;d like to be able to specify the column `color` as the set differentiator


  [1]: http://i.stack.imgur.com/SlPtV.png

Plotting multiple lines, in different colors, with pandas dataframe

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) give a lot of power to inspect the React component tree, and look at props, event handlers, etc. However, what I&#39;d really like to do is to be able to inspect those data structures in the browser console.

In chrome I can play with the currently selected DOM element in the console using `$0`. Is there a way to extract React component info from `$0`, or is it possible to do something similar with the React Dev Tools?

How do you inspect a react element&#39;s props &amp; state in the console?

I know that for &#39;class&#39; we must use className, but how do i get react to preserve &#39;for&#39; attribute?

The following:

    &lt;label for=&quot;recipient-name&quot; className=&quot;control-label&quot;&gt;Recipient:&lt;/label&gt;

is rendered as:

    &lt;label class=&quot;control-label&quot;&gt;Recipient:&lt;/label&gt;

on an unrelated note, i find it annoying that i can not change attributes using chrome&#39;s console when using React.  is there a way around that?  for example if i inspect the rendered element and add the &#39;for&#39; attribute manually, it disappears when i click away from that control (presumably because react re-renders the control i&#39;m guessing)

React-js ignores label&#39;s &#39;for&#39; attribute

I know that for 'class' we must use className, but how do i get react to preserve 'for' attribute?
The following:
<pre><code class="hljs language-ini">&#x3C;label for="recipient-name" className="control-label">Recipient:&#x3C;/label>
</code></pre>
is rendered as:
<pre><code class="hljs language-ini">&#x3C;label class="control-label">Recipient:&#x3C;/label>
</code></pre>
on an unrelated note, i find it annoying that i can not change attributes using chrome's console when using React. is there a way around that? for example if i inspect the rendered element and add the 'for' attribute manually, it disappears when i click away from that control (presumably because react re-renders the control i'm guessing)

is it possible to import something into module providing variable name while using ES6 import?

I.e. I want to import some module at a runtime depending on values provided in a config:

    import something from &#39;./utils/&#39; + variableName;

ES6 variable import name in node.js?

I am trying to change the innerHTML of my page to become the innerHTML of the element I click on, the only problem is that i want it to take the whole element such as:

    &lt;section class=&quot;homeItem&quot; data-detail=&quot;{&quot;ID&quot;:&quot;8&quot;,&quot;Name&quot;:&quot;MacBook Air&quot;,&quot;Description&quot;:&quot;2015 MacBook A…&quot;20&quot;,&quot;Price&quot;:&quot;899&quot;,&quot;Photo&quot;:&quot;Images/Products/macbookAir.png&quot;}&quot;&gt;&lt;/section&gt;

Whereas the code that i have written in javascript: 


    function selectedProduct(event){
      target = event.target;
      element = document.getElementById(&quot;test&quot;);
      element.innerHTML = target.innerHTML;
    }

will target the specific element that i click on.

What i would like to achieve is when i click on anywhere in the `&lt;section&gt;` element, that it will take the innerHTML of the whole element rather than the specific one that i have clicked.

I would presume it is something to do with selecting the parent element of the one that is clicked but i am not sure and can&#39;t find anything online.

If possible i would like to stay away from JQuery

Can you target an elements parent element using event.target?

I have all necessary files in my code and I am still getting this error:

&gt; Bootstrap&#39;s JavaScript requires jQuery version 1.9.1 or higher

This is my code:

    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&#39;//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#39;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/jquery.responsiveiframe.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/ios-orientationchange-fix.js&quot;&gt;&lt;/script&gt;

Anyone got this error before? I could try and download a local copy instead of using the CDN link but it&#39;s really unnecessary, plus i want to know why this isn&#39;t working!

EDIT: I&#39;ve tried many different libraries, the one I posted is the last one I&#39;ve tried

![enter image description here][1]

  [1]: http://i.stack.imgur.com/V7XQS.png

Bootstrap&#39;s JavaScript requires jQuery version 1.9.1 or higher

Is it possible to create a template string as a usual string,

    let a = &quot;b:${b}&quot;;

and then convert it into a template string,

    let b = 10;
    console.log(a.template()); // b:10

without `eval`, `new Function` and other means of dynamic code generation?


Convert a string to a template string

I&#39;m trying to get into Grunt, which I am new to, but I do not understand its utility.

I understand that it is a taskrunner. I understand that it can be used to do things like bundle, uglify, jshint, minify, etc etc etc, anything that can be turned into a scripted task.

But I don&#39;t see what advantage this gives. Nearly all of these can be run from the command line anyway, which is to say you could just combine them using a simple shell script. It seems to me that setting up grunt + gruntfiles and writing tasks is *more* work than writing a shell script, rather than less.

What am I missing about this?

What is Grunt for?

I&#39;m new to ReactJS and to React-Router. I have a component that receives through props a `&lt;Link/&gt;` object from **react-router**. Whenever the user clicks on a &#39;next&#39; button inside this component I want to invoke `&lt;Link/&gt;` object manually.
  
  Right now, I&#39;m using *refs* to access the **backing instance** and manually clicking on the &#39;a&#39; tag that `&lt;Link/&gt;` generates. 

  **Question:** Is there a way to manually invoke the Link (e.g. `this.props.next.go`)?

This is the current code I have:

    //in MasterPage.js
    var sampleLink = &lt;Link to=&quot;/sample&quot;&gt;Go To Sample&lt;/Link&gt;
    &lt;Document next={sampleLink} /&gt;
    
    //in Document.js
    ...
    var Document = React.createClass({
       _onClickNext: function() {
          var next = this.refs.next.getDOMNode();
          next.querySelectorAll(&#39;a&#39;).item(0).click(); //this sounds like hack to me
       },
       render: function() {
          return (
             ...
             &lt;div ref=&quot;next&quot;&gt;{this.props.next} &lt;img src=&quot;rightArrow.png&quot; onClick={this._onClickNext}/&gt;&lt;/div&gt;
             ...
          );
       }
    });
    ...

This is the code I would like to have:

    //in MasterPage.js
    var sampleLink = &lt;Link to=&quot;/sample&quot;&gt;Go To Sample&lt;/Link&gt;
    &lt;Document next={sampleLink} /&gt;
    
    //in Document.js
    ...
    var Document = React.createClass({
       render: function() {
          return (
             ...
             &lt;div onClick={this.props.next.go}&gt;{this.props.next.label} &lt;img src=&quot;rightArrow.png&quot; /&gt; &lt;/div&gt;
             ...
          );
       }
    });
    ...

React-router: How to manually invoke Link?

EDIT: this is a duplicate, see [here][1]

I can&#39;t find any examples of using a dynamic key name when setting the state.  This is what I want to do:

    inputChangeHandler : function (event) {
        this.setState( { event.target.id  : event.target.value } );
    },

where event.target.id is used as the state key to be updated.  Is this not possible in React?  


  [1]: https://stackoverflow.com/questions/2462800/how-to-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable

Reactjs setState() with a dynamic key name?

The recently launched react native features just iOS app example and docs.

Can I build Android apps with react native?

I&#39;m playing with [Facebook/React Native](https://github.com/facebook/react-native), and when I run `git init`, I have no idea what should be ignored expect `node_modules` folder,

Should I commit all iOS folder?

Thanks

What folders should be git ignored in React Native project?

For the purposes of debugging in the console, is there any mechanism available in React to use a DOM element instance to get the backing React component?

This question has been asked previously in the context of using it in production code. However, my focus is on development builds for the purpose of debugging.

I&#39;m familiar with the &lt;a href=&quot;https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en&quot;&gt;Chrome debugging extension for React&lt;/a&gt;, however this isn&#39;t available in all browsers. Combining the DOM explorer and console it is easy to use the &#39;$0&#39; shortcut to access information about the highlighted DOM element.

I would like to write code something like this in the debugging console:
getComponentFromElement($0).props

Even in a the React development build is there no mechanism to use maybe the element&#39;s ReactId to get at the component?



Content Type	Original Author	Original Content on Stackoverflow
Question	mike01010	View Question on Stackoverflow
Solution 1 - Javascript	zerkms	View Answer on Stackoverflow
Solution 2 - Javascript	Ali Rehman	View Answer on Stackoverflow

React-js ignores label's 'for' attribute

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

How do you inspect a react element's props & state in the console?

Plotting multiple lines, in different colors, with pandas dataframe

Attributions