Try this (ES5):

```
&lt;div className={&#39;total total-&#39; + obj.state}&gt;...&lt;/div&gt;
```

Or with ES6+

```
&lt;div className={`total total-${obj.state}`}&gt;...&lt;/div&gt;
```

Remember that everything between `{` and `}` is just Javascript, so the expression is `&#39;total total-&#39; + obj.state` which is then set as the class of the DOM node.

You could use a react expression and then the javascript [es6 string interpolation][1]

Something like this:

    &lt;div someProp={`${SomeConstOrVariableOrExpression} simple text`}&gt;&lt;/div&gt;


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

I&#39;m having some trouble creating CSS circles in react-native.  The following works in iPhone 6 Plus but in all the other iPhones, they become diamonds.

    circle: {
      height: 30,
      width: 30,
      borderRadius: 30,
    }

Now if I use PixelRatio on `borderRadius` it works in everything but iPhone 6 plus.  iPhone 6 plus renders it as boxes with rounded corners.

    circle: {
      height: 30,
      width: 30,
      borderRadius: 30 / PixelRatio.get(),
    }


Creating CSS circles in react-native

I have a pandas data frame with 50k rows.  I&#39;m trying to add a new column that is a randomly generated integer from 1 to 5.  

If I want 50k random numbers I&#39;d use:

    df1[&#39;randNumCol&#39;] = random.sample(xrange(50000), len(df1))

but for this I&#39;m not sure how to do it.

Side note in R, I&#39;d do:

    sample(1:5, 50000, replace = TRUE)

Any suggestions?

Pandas: create new column in df with random integers from range

Looking to achieve the following:

    &lt;div className=&quot;total total-{obj.state}&quot;&gt;

Obviously this compiles to:

    &lt;div class=&quot;total total-{obj.state}&quot;&gt;

Is there an elegant way in JSX to evaluate the expression in the `{}` within a string?

How can I interpolate JSX with an expression in a string?

Looking to achieve the following:
<pre><code class="hljs language-ini">&#x3C;div className="total total-{obj.state}">
</code></pre>
Obviously this compiles to:
<pre><code class="hljs language-ini">&#x3C;div class="total total-{obj.state}">
</code></pre>
Is there an elegant way in JSX to evaluate the expression in the <code>{}</code> within a string?

I am playing around with the ReactJS framework on [JSBin](https://jsbin.com/).

I have noticed that if my component name starts with a lowercase letter it does not work.

For instance the following does not render:


    var fml = React.createClass({
      render: function () {
        return &lt;a href=&#39;google.com&#39;&gt;Go&lt;/a&gt;
      }
    });
    
    React.render(&lt;fml /&gt;, document.body);



But as soon as I replace the `fml` with `Fml` it does render. 

Is there a reason I cannot begin tags with small letters?

ReactJS component names must begin with capital letters?

Can I use inline HTML in a script as below by using a library like jsx:
    
    &lt;script src=&quot;jsx-transform.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/jsx&quot;&gt;
    define(&#39;component&#39;, function () {
       return (&lt;div&gt;test html code&lt;/div&gt;);
    });
    &lt;/script&gt;

Can I use jsx without React to inline HTML in script?

I&#39;m trying to replace parts of a string with JSX tags, like so:

    render: function() {
        result = this.props.text.replace(&quot;:&quot;,&lt;div className=&quot;spacer&quot;&gt;&lt;/div&gt;);
        return (
             &lt;div&gt;        
                 {result}
             &lt;div&gt;        
        );
    }

But given that `this.props.text` is `Lorem : ipsum`, it results in

    &lt;div&gt;
        Lorem [object Object] ipsum.
    &lt;/div&gt;

Is there a way to solve this or another way to replace parts of a string with JSX tags?

Replace part of string with tag in JSX

I have a popup list which is a ``div`` that contains a vertical list of child ``div``s.  I have added up/down keyboard navigation to change which child is currently highlighted.

Right now, if I press the down key enough times, the highlighted item is no longer visible.  The same thing also occurs with the up key if the view is scrolled.

What is the right way in React to automatically scroll a child ``div`` into view?

How can I scroll a div to be visible in ReactJS?

I&#39;m writing a script which moves dropdown below or above input depending on height of dropdown and position of the input on the screen. Also I want to set modifier to dropdown according to its direction.
But using `setState` inside of the `componentDidUpdate` creates an infinite loop(which is obvious)

I&#39;ve found a solution in using `getDOMNode` and setting classname to dropdown directly, but i feel that there should be a better solution using React tools. Can anybody help me?

Here is a part of working code with `getDOMNode` (i 
a little bit neglected positioning logic to simplify code)

    let SearchDropdown = React.createClass({
    	componentDidUpdate(params) {
    		let el = this.getDOMNode();
    		el.classList.remove(&#39;dropDown-top&#39;);
            if(needToMoveOnTop(el)) {
                el.top = newTopValue;
                el.right = newRightValue;
                el.classList.add(&#39;dropDown-top&#39;);
            }
        },
    	render() {
            let dataFeed = this.props.dataFeed;
    	    return (
    			&lt;DropDown &gt;
    			    {dataFeed.map((data, i) =&gt; {
    					return (&lt;DropDownRow key={response.symbol} data={data}/&gt;);
    				})}
    			&lt;/DropDown&gt;
    		);
    	}
    });

and here is code with setstate (which creates an infinite loop)

    let SearchDropdown = React.createClass({
    	getInitialState() {
    		return {
    			top: false
    		};
    	},
    	componentDidUpdate(params) {
    		let el = this.getDOMNode();
    		if (this.state.top) {
               this.setState({top: false});
            }
            if(needToMoveOnTop(el)) {
                el.top = newTopValue;
                el.right = newRightValue;
                if (!this.state.top) {
                  this.setState({top: true});
               }
            }
        },
    	render() {
            let dataFeed = this.props.dataFeed;
            let class = cx({&#39;dropDown-top&#39; : this.state.top});
    	    return (
    			&lt;DropDown className={class} &gt;
    			    {dataFeed.map((data, i) =&gt; {
    					return (&lt;DropDownRow key={response.symbol} data={data}/&gt;);
    				})}
    			&lt;/DropDown&gt;
    		);
    	}
    });


Content Type	Original Author	Original Content on Stackoverflow
Question	benhowdle89	View Question on Stackoverflow
Solution 1 - Reactjs	Anders Ekdahl	View Answer on Stackoverflow
Solution 2 - Reactjs	pedrommuller	View Answer on Stackoverflow

How can I interpolate JSX with an expression in a string?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Pandas: create new column in df with random integers from range

Creating CSS circles in react-native

Attributions