The `for` attribute is called `htmlFor` for consistency with the DOM property API. If you&#39;re using the development build of React, you should have seen a warning in your console about this.

Yes, for react, 

`for` becomes `htmlFor`

`class` becomes `className`

etc. 

see full list of how HTML attributes are changed here: 

https://facebook.github.io/react/docs/dom-elements.html


For React you must use it&#39;s per-define keywords to define html attributes. 

&gt; `class` -&gt; `className`

 is used and 

&gt; `for` -&gt; `htmlFor`

 is used, as react is case sensitive make sure you must follow small and capital as required.



both `for` and `class` are reserved words in JavaScript this is why when it comes to HTML attributes in JSX you need to use something else, React team decided to use `htmlFor` and `className` respectively

# just using react `htmlFor` to replace `for`!

&gt; Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.



## refs

you can find more info by following the below links.


https://facebook.github.io/react/docs/dom-elements.html#htmlfor


https://github.com/facebook/react/issues/8483

https://github.com/facebook/react/issues/1819

That is htmlFor in JSX and class is className in JSX

I converted a Pandas dataframe to an HTML output using the `DataFrame.to_html` function. When I save this to a separate HTML file, the file shows truncated output.

For example, in my TEXT column,

`df.head(1)` will show

*The film was an excellent effort...*

instead of

*The film was an excellent effort in deconstructing the complex social sentiments that prevailed during this period.*

This rendition is fine in the case of a screen-friendly format of a massive Pandas dataframe, but I need an HTML file that will show complete tabular data contained in the dataframe, that is, something that will show the latter text element rather than the former text snippet.

How would I be able to show the complete, non-truncated text data for each element in my TEXT column in the HTML version of the information? I would imagine that the HTML table would have to display long cells to show the complete data, but as far as I understand, only column-width parameters can be passed into the `DataFrame.to_html` function.



How can I display full (non-truncated) dataframe information in HTML when converting from Pandas dataframe to HTML?

I have a Dockerfile that I am putting together to install a vanilla python environment (into which I will be installing an app, but at a later date).

    FROM ubuntu:12.04

    # required to build certain python libraries
    RUN apt-get install python-dev -y

    # install pip - canonical installation instructions from pip-installer.org
    # http://www.pip-installer.org/en/latest/installing.html
    ADD https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py /tmp/ez_setup.py
    ADD https://raw.github.com/pypa/pip/master/contrib/get-pip.py /tmp/get-pip.py
    RUN python /tmp/ez_setup.py
    RUN python /tmp/get-pip.py
    RUN pip install --upgrade pip 

    # install and configure virtualenv
    RUN pip install virtualenv 
    RUN pip install virtualenvwrapper
    ENV WORKON_HOME ~/.virtualenvs
    RUN mkdir -p $WORKON_HOME
    RUN source /usr/local/bin/virtualenvwrapper.sh

The build runs ok until the last line, where I get the following exception:

    [previous steps 1-9 removed for clarity]
    ...
    Successfully installed virtualenvwrapper virtualenv-clone stevedore
    Cleaning up...
     ---&gt; 1fc253a8f860
    Step 10 : ENV WORKON_HOME ~/.virtualenvs
     ---&gt; Running in 8b0145d2c80d
     ---&gt; 0f91a5d96013
    Step 11 : RUN mkdir -p $WORKON_HOME
     ---&gt; Running in 9d2552712ddf
     ---&gt; 3a87364c7b45
    Step 12 : RUN source /usr/local/bin/virtualenvwrapper.sh
     ---&gt; Running in c13a187261ec
    /bin/sh: 1: source: not found

If I `ls` into that directory (just to test that the previous steps were committed) I can see that the files exist as expected:

    $ docker run 3a87 ls /usr/local/bin
    easy_install
    easy_install-2.7
    pip
    pip-2.7
    virtualenv
    virtualenv-2.7
    virtualenv-clone
    virtualenvwrapper.sh
    virtualenvwrapper_lazy.sh

If I try just running the `source` command I get the same &#39;not found&#39; error as above. If I RUN an interactive shell session however, source does work:

    $ docker run 3a87 bash
    source
    bash: line 1: source: filename argument required
    source: usage: source filename [arguments]
    
I can run the script from here, and then happily access `workon`, `mkvirtualenv` etc.

I&#39;ve done some digging, and initially it looked as if the problem might lie in the difference between **bash** as the Ubuntu _login shell_, and **dash** as the Ubuntu _system shell_, **dash** not supporting the `source` command.

However, the answer to this appears to be to use **&#39;.&#39;** instead of `source`, but this just causes the Docker runtime to blow up with a go panic exception.

What is the best way to run a shell script from a Dockerfile RUN instruction to get around this (am running off the default base image for Ubuntu 12.04 LTS).

Using the RUN instruction in a Dockerfile with &#39;source&#39; does not work

In React (Facebook&#39;s framework), I need to render a label element bound to a text input using the standard `for` attribute.

e.g. the following JSX is used:

    &lt;label for=&quot;test&quot;&gt;Test&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;test&quot; /&gt;

However, this produces HTML missing the required (and standard) `for` attribute:

    &lt;label&gt;Test&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;test&quot;&gt;

What am I doing wrong?

React ignores &#39;for&#39; attribute of the label element

In React (Facebook's framework), I need to render a label element bound to a text input using the standard <code>for</code> attribute.
e.g. the following JSX is used:
<pre><code class="hljs language-ini">&#x3C;label for="test">Test&#x3C;/label>
&#x3C;input type="text" id="test" />
</code></pre>
However, this produces HTML missing the required (and standard) <code>for</code> attribute:
<pre><code class="hljs language-bash">&#x3C;label>Test&#x3C;/label>
&#x3C;input type="text" id="test">
</code></pre>
What am I doing wrong?

I&#39;m trying to do something like the following in React JSX (where ObjectRow is a separate component):

    &lt;tbody&gt;
        for (var i=0; i &lt; numrows; i++) {
            &lt;ObjectRow/&gt;
        } 
    &lt;/tbody&gt;

I realize and understand why this isn&#39;t valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).



Loop inside React JSX

It&#39;s there a way to add inline styles with the !important override?

    style={
      height: 20+&#39;!important&#39;
    };

    &lt;div style={style}&gt;&lt;/div&gt;

This isn&#39;t working as I would have hoped. 

!important inline styles in react

Whenever I try to use a Font Awesome icon in React&#39;s `render()`, it isn&#39;t displayed on the resulting web page although it works in normal HTML.

    render: function() {
        return &lt;div&gt;&lt;i class=&quot;fa fa-spinner fa-spin&quot;&gt;no spinner but why&lt;/i&gt;&lt;/div&gt;;
    }

Here is an live example: http://jsfiddle.net/pLWS3/

Where is the fault? 

How to include a Font Awesome icon in React&#39;s render()

How do you perform debounce in React.js?

I want to debounce the handleOnChange.

I tried with `debounce(this.handleOnChange, 200)` but it doesn&#39;t work.
 
    function debounce(fn, delay) {
      var timer = null;
      return function() {
        var context = this,
          args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay);
      };
    }

    var SearchBox = React.createClass({
      render: function() {
        return &lt;input type=&quot;search&quot; name=&quot;p&quot; onChange={this.handleOnChange} /&gt;;
      },

      handleOnChange: function(event) {
        // make ajax call
      }
    });


Perform debounce in React.js

I am new to React.js Library and I was going over some of the tutorials and I came across:
 

 - `this.setState`
 - `this.replaceState`

The Description given is not very clear (IMO).

    setState is done to &#39;set&#39; the state of a value, even if its already set 
    in the &#39;getInitialState&#39; function.

Similarly,

    The replaceState() method is for when you want to clear out the values 
    already in state, and add new ones.

I tried **`this.setState({data: someArray});`** followed by **`this.replaceState({test: someArray});`** and then console.logged them and I found that `state` now had both `data` and `test`.

Then, I tried **`this.setState({data: someArray});`** followed by **`this.setState({test: someArray});`** and then console.logged them and I found that `state` again had both `data` and `test`.

 So, what exactly is the difference between the two ?

setState vs replaceState in React.js

So far I have been able to label the subplots just fine but I&#39;m having an issue with the main one.

Here&#39;s the relevant part of my code:

    data_BS_P = data[channels[0]]
    data_BS_R = data[channels[1]]
    data_BS_Y = data[channels[2]]
    plot_BS_P = data_BS_P.plot() #data_BS_P is a pandas dataframe
    axBS = plot_BS_P.gca()
    axBS.plot(data_BS_R, label=&#39;Roll&#39;)
    axBS.plot(data_BS_Y, label=&#39;Yaw&#39;)
    axBS.set_ylabel(&#39;Amplitude (urad)&#39;)
    axBS.legend(loc=&#39;upper center&#39;, bbox_to_anchor=(0.5, 1.05), ncol=3,
                fancybox=True, shadow=True)
    ml1 = MultipleLocator(10)
    ml2 = MultipleLocator(3600)
    axBS.yaxis.set_minor_locator(ml1)
    axBS.xaxis.set_minor_locator(ml2)
    plot_BS_P.save(&#39;L1-SUS-BS_M1_DAMP_PRY_INMON.jpg&#39;)


And this is what I have so far: ![enter image description here][1]
Notice the lengthy label for the blue line. I&#39;d like that to be labeled as &quot;Pitch&quot; instead of the file name. In which line can I do that?

  [1]: http://i.stack.imgur.com/BDZY8.jpg

Change main plot legend label text

I have spent hours looking in the documentation and on StackOverflow, but no solution seems to solve my problem. When using `ggplot` I can&#39;t get the right text in the legend, even though it&#39;s in my  dataframe. I have tried `scale_colour_manual`, `scale_fill_manual` with different values for `labels=` such as `c(&quot;T999&quot;, &quot;T888&quot;)&quot;, &quot;cols&quot;`.

Here is my code:

    T999 &lt;- runif(10, 100, 200)
    T888 &lt;- runif(10, 200, 300)
    TY &lt;- runif(10, 20, 30)
    df &lt;- data.frame(T999, T888, TY)


    ggplot(data = df, aes(x=T999, y=TY, pointtype=&quot;T999&quot;)) + 
           geom_point(size = 15, colour = &quot;darkblue&quot;) + 
           geom_point(data = df, aes(x=T888, y=TY), colour = &#39;red&#39;, size = 10 ) + 
           theme(axis.text.x = element_text(size = 20), axis.title.x =element_text(size = 20),   axis.text.y = element_text(size = 20)) +
           xlab(&quot;Txxx&quot;) + ylab(&quot;TY [&#176;C]&quot;) + labs(title=&quot;temperatures&quot;, size = 15) + 
           scale_colour_manual(labels = c(&quot;T999&quot;, &quot;T888&quot;), values = c(&quot;darkblue&quot;, &quot;red&quot;)) +    theme(legend.position=&quot;topright&quot;)

Help would be very appreciated!


Editing legend (text) labels in ggplot

I am trying to plot counts in gridded plots, but I haven&#39;t been able to figure out how to go about it.

I want:

1. to have dotted grids at an interval of 5;

2. to have major tick labels only every 20;

3. for the ticks to be outside the plot; and

4. to have &quot;counts&quot; inside those grids.

I have checked for potential duplicates, such as [here][1] and [here][2], but have not been able to figure it out.

This is my code:

    import matplotlib.pyplot as plt
    from matplotlib.ticker import MultipleLocator, FormatStrFormatter

    for key, value in sorted(data.items()):
        x = value[0][2]
        y = value[0][3]
        count = value[0][4]

        fig = plt.figure()
        ax = fig.add_subplot(111)

        ax.annotate(count, xy = (x, y), size = 5)
        # overwrites and I only get the last data point

        plt.close()
        # Without this, I get a &quot;fail to allocate bitmap&quot; error.

    plt.suptitle(&#39;Number of counts&#39;, fontsize = 12)
    ax.set_xlabel(&#39;x&#39;)
    ax.set_ylabel(&#39;y&#39;)
    plt.axes().set_aspect(&#39;equal&#39;)

    plt.axis([0, 1000, 0, 1000])
    # This gives an interval of 200.

    majorLocator   = MultipleLocator(20)
    majorFormatter = FormatStrFormatter(&#39;%d&#39;)
    minorLocator   = MultipleLocator(5)
    # I want the minor grid to be 5 and the major grid to be 20.
    plt.grid()

    filename = &#39;C:\Users\Owl\Desktop\Plot.png&#39;
    plt.savefig(filename, dpi = 150)
    plt.close()

This is what I get.

![This is what I get:][3]

I also have a problem with the data points being overwritten.

Could anybody PLEASE help me with this problem?

  [1]: https://stackoverflow.com/questions/12608788/
  [2]: https://stackoverflow.com/questions/10453770/matplotlib-define-size-of-a-grid-on-a-plot
  [3]: http://i.stack.imgur.com/XKLi0.png

Change grid interval and specify tick labels in Matplotlib

I&#39;m creating very simple charts with matplotlib / pylab Python module. The letter &quot;y&quot; that labels the Y axis is on its side. You would expect this if the label was longer, such as a word, so as not to extend the outside of the graph to the left too much. But for a one letter label, this doesn&#39;t make sense, the label should be upright. My searches have come up blank. How can I print the &quot;y&quot; horizontally?

How to print Y axis label horizontally in a matplotlib / pylab chart?

I would like to move some ticks&#39; labels horizontally along the x-axis,  without moving the corresponding ticks.

More specifically, when rotating labels with `plt.setp`, the centers of the labels&#39; text stay aligned with the ticks. I would like to shift those labels to the right, so that the near ends of the labels get aligned instead as suggested on the image below.

![enter image description here][1]

 
I am aware of [this post][2] and [this one][3], however the answers are interesting kludges rather than strict answers to the question.

my code:

    import matplotlib.pyplot as plt
    import numpy as np
    import datetime
    
    # my fake data
    dates = np.array([datetime.datetime(2000,1,1) + datetime.timedelta(days=i) for i in range(365*5)])
    data = np.sin(np.arange(365*5)/365.0*2*np.pi - 0.25*np.pi) + np.random.rand(365*5) /3
    
    # creates fig with 2 subplots
    fig = plt.figure(figsize=(10.0, 6.0))
    ax = plt.subplot2grid((2,1), (0, 0))
    ax2 = plt.subplot2grid((2,1), (1, 0))
    ## plot dates
    ax2.plot_date( dates, data )
    
    # rotates labels 
    plt.setp( ax2.xaxis.get_majorticklabels(), rotation=-45 ) 
    
    # try to shift labels to the right
    ax2.xaxis.get_majorticklabels()[2].set_y(-.1)
    ax2.xaxis.get_majorticklabels()[2].set_x(10**99)
    
    plt.show()

  Strangely enough, `set_y` behaves as expected, but even if I set `x` to a fantasillion, the labels would not move by one iota. 
(The use of `plot_date` may introduce additional confusion, but the same actually happens with `plot`.)


  [1]: http://i.stack.imgur.com/CESDj.png
  [2]: https://stackoverflow.com/q/16162514/4041970
  [3]: https://stackoverflow.com/q/24190858/4041970

Content Type	Original Author	Original Content on Stackoverflow
Question	goofballLogic	View Question on Stackoverflow
Solution 1 - Reactjs	Sophie Alpert	View Answer on Stackoverflow
Solution 2 - Reactjs	Derrick	View Answer on Stackoverflow
Solution 3 - Reactjs	Jani Devang	View Answer on Stackoverflow
Solution 4 - Reactjs	Trident D'Gao	View Answer on Stackoverflow
Solution 5 - Reactjs	xgqfrms	View Answer on Stackoverflow
Solution 6 - Reactjs	Daniel Nguyen	View Answer on Stackoverflow

React ignores 'for' attribute of the label element

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

Solution 4 - Reactjs

Solution 5 - Reactjs

just using react `htmlFor` to replace `for`!

refs

Solution 6 - Reactjs

Using the RUN instruction in a Dockerfile with 'source' does not work

How can I display full (non-truncated) dataframe information in HTML when converting from Pandas dataframe to HTML?

Attributions

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

Solution 4 - Reactjs

Solution 5 - Reactjs

just using react htmlFor to replace for!

refs

Solution 6 - Reactjs

Using the RUN instruction in a Dockerfile with 'source' does not work

How can I display full (non-truncated) dataframe information in HTML when converting from Pandas dataframe to HTML?

Attributions

just using react `htmlFor` to replace `for`!