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?
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.)
Related
I'm buidling a React app in VS code and was was wondering if there was some sort of snippet or extension that would allow me to wrap JSX in a parent tag without having to type to opening tag then moving to the end of the piece of JSX I want to wrap in order to place the closing tag. For example I would have a bunch of paragraphs:
<p>Hi there</p>
<p>How are you?</p>
<p>More paragraphs...</p>
...
That I would want to wrap a div around so it would be like this:
<div className="some class">
<p>Hi there</p>
<p>How are you?</p>
<p>More paragraphs...</p>
......
</div>
But I find uncomfortable at times, what would have is I would type <div> then </div> would automatically show up in the same line, then I would cut it and paste it at the end of all the <p> tags. So I was wondering if there was a more efficient way of doing this?
I tried searching for extensions but could not find any.
You can do it easily.
Just select the JSX code block.
Open command palate ctrl+shift+p
Search for wrap with keyword, and then you will find something like emmet wrap with abbreviation.
Press enter after that you can write and emmet expression eg:- to wrap with div with className="some class" then you can write .some.class
if you want you can assign a shortcut to the command
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
I have an application and using vis.js to build timeline events.
I'm using React.
I want to add an icon near each event, so I using groupTemplate and I want to render there a component with group text and icon.
in the options I add:
groupTemplate: (item, element) => {
if (!item) return;
ReactDOM.render(<TimelineGroupComp item={item}/>, element);
}
TimelineGroupComp component render function:
return (
<div className="primary-wrapper" key={this.props.item.content}>
<div style="background-image:url(../images/myIcon.svg);"/>
</div>
);
I get the correct Icon but the text is the item.id instead item.content.
I try to add a span with the correct text in the TimelineGroupComp but it renders also the item.id, not only the correct text.
Also I have another problem: when I collapse/expaned the group, I have an error in the console:
Warning: render(...): It looks like the React-rendered content of this
container was removed without using React. This is not supported and will
cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a
container.
and the group is render normal, ignored my component.
I know this post is almost a year old, but I thought I'd post the answer to this question anyways for anyone who gets the same issue in the future. I've had the same issue and this is how I fixed it.
Starting with React 16, if you want to use React templates in Vis Timeline you'll have to use React.createPortal in the groupTemplate option, see https://jsfiddle.net/api/post/library/pure/.
For the code above, the correct groupTemplate would be:
groupTemplate: (item, element) => {
if (!item) return;
ReactDOM.createPortal(
ReactDOM.render(<TimelineGroupComp item={item}/>, element),
element
)
}
I'm doing a course in react and I notice when adding text within a tag and I use a contraction in the sentence (in this case "I'm...") all the text following the single quote is a different color than the preceding "I". Is there a way to configure notepad++ so it keeps the color of the text the same? I realize this is purely cosmetic but it would be nice to have consistency of font colors throughout my code.
I've done some searching around but I can't find anything addressing this particular issue.
class App extends Component {
render() {
return (
<div className="App">
<h1>Hi, I'm a React App</h1>
</div>
);
}
}
In the h1 tag the sentence: "Hi, I'm a React App" is where my issue is. The letters preceding the quote are all one color (so "Hi, I..." are all green in my case) and the letters following are all another due to the way notepad++ is reading the quote and setting colors (so the letters "...'m a React App" are all appearing as white).
Just a quick question..
I am trying to generate an text input where the default value is nested in tag with an inline css..just to make it look smaller and grayer than the normal input.
echo $this->Form->input( 'address', array('div'=>false, 'label'=>'', 'default'=>'<span style="font-size: 0.6em;color:#e3e3e3;">put your address here</span>', 'size'=>'50' ) );
after the user would click, the default value would be erased leaving it blank.
However cakephp generates the input with the value containing the html tags, i.e. .
How do I make cakephp unfilter the html in the default value?
I forgot what option to use in this situation and I tried everything that I can think of. I remember that I can do this by just adding some sort of value in the option array like 'html'=>false.
Put your helper text in your labels. If you put the default value as a HTML string the Input will display the HTML as it does not render HTML inside of it.
If you add the additional HTML to your label, you could use this http://trevordavis.net/blog/jquery-inline-form-labels to overlay the labels over the inputs.
echo $this->Form->input( 'address', array('div'=>false, 'label'=>'put your address here','size'=>'50' ) );
Also, this method allows you to apply the css externally instead of inline -- which is always best.
I am not aware of any way to get an input box to render html inside itself. There is also nothing in the API to suggest what you want. It is possible to embed it within a div, and to include things before, after, and between the label and input. I think you need to use javascript to accomplish what you want to do.
<style>
.default {font-size: 0.6em;color:#e3e3e3;}
.normal {color:black;}
</style>
<script language='javascript'>
function change(input)
{
input.classList.add("normal");
if (input.value == "enter text here")
input.value = "";
}
</script>
<form>
<input id='test' class='default' type='text' value='enter text here' onfocus='change(this);'>
</form>