CODEWITHSUNDEEP
reactjs
Riina
Riina

Reputation: 530

How to deal with reactjs adding a surrounding div to my component?

Reactjs adds a surrounding div to my component that breaks my layout. I want The text "Balance" and the amount to be on the same line. 

<span>Balance:</span>  
<div id="Balance-react-component-7c517694-f02f-4cbb-aee1-08a98f7ea145">     
    <span data-reactroot="" class="balance">$3.00</span>
</div>

I know I could just have the component return the entire text, including the word Balance, but I don't want to do that. How do I stop react from outputting this div, or at least make it a span instead so it doesn't force a line break?

Upvotes: 3

Views: 121

Answers (1)

Riina
Riina

Reputation: 530

react_component("Balance",  
    :html_options => {:style => "display:inline-block"}
)

Was a case of RTFM, I found the solution is to use the html_options parameter to pass a style to the surrounding div. (Can also pass a class as well and style it that way.)

Upvotes: 1

Related Questions