I'm trying to indent my JSX a little nicer, but I'm losing a blank space between components. For example
<span>Saved: { this.props.fetchedTitle + ' ' }
<AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />{' '}
<BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>
Note the manual space inserted after fetchedTitle and after AjaxButton. If I cram everything onto one line with spaces between the components, the space is inserted for me. When I break things into multiple lines, the space is gone, forcing me to manually add it, even if I manually insert a space before or after the line break.
Is there a way around this? (this ui is just a rough prototype / exploratory exercise - eventually there'll probably be a more robust layout, but I would still like to understand why React is responding to the jsx the way it is)
Another quick trick to add whitespace between components is to use the following:
{' '}
Per https://github.com/facebook/react/issues/1643#issuecomment-45325969
React controls it. Fiddle example is here. So lets i gonna describe two moments around this misunderstanding:
When you a trying to place the white space between two components you have to place this components in a one line like below:
<Parent>
<Child1 title='Yo'/><Child2 title='Yo'/>
<Parent>
It will be translated with whitespace like
Yo Yo
But if you separate components in a different lines
<Mother>
<Child1 title='Yo'/>
<Child2 title='Yo'/>
</Mother>
It will be translated without whitespace
YoYo
React Link is here!
I hope it will help you!
Thanks!
Try this.
<span>Saved: { this.props.fetchedTitle }
<AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />
<BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>
Related
I'm working on a text highlighting and I was able to detect selection etc. Now I have something like
Te<span>x</span>t
in a string and
["Te", "<span>", "x", "</span>", "t"]
In an array. How can I render this using react in a safe way? DangerouslysetinnerHTML doesn't work here by the way (maybe needs a hook or something, but it's unsafe so, better to use something else).
*The amount of these spans can change so there may be a lot of tags.
Edit: My algorithm makes a mask (an array full of zeros) for a text and whenever user selects something it adds 1 to certain fields in array (like an interval). Then it parses the text and the mask, and when for example 01 occurs then it pastes the opening tag in between (and when 10 => closing tag). What's maybe other way of achieving Medium-like highlighting feature?
Thanks in advance
The dangerouslySetInnerHTML is dangerous when you try to render user content with it. What I mean, it's not more dangerous to render string with <spans> injected than the original string. If you want to sanitize the string, you could do it before highlighting.
<div dangerouslySetInnerHTML={{ __html: "Te<span>x</span>t" }} />
Desired result:
I'm trying to highlight text separated by commas inside of a textarea tag (in a React project).
I really can't figure out how to accomplish this, yet every solution I've come across online uses jQuery (I really don't want to inject jQuery halfway through my project).
This is the function I currently have to trim the input values and split them:
handleTags = async (event) => {
let tags = event.target.value.toLowerCase().trim().replace(/[^\w,-]/g, '')
tags = tags.split(",")
await this.setState({post: {...this.state.post, tags: tags}})
}
And this is the JSX for the textarea within my render() {...} function:
<Card.Footer className="quickpost-tags-container">
<textarea
onChange={event => this.handleTags(event)}
className="postbox-tags-textarea"
placeholder="science, non-fiction, etc..."
contentEditable
suppressContentEditableWarning>
</textarea>
</Card.Footer>
I'd appreciate any help.
So I understand that this question was a bit meh, didn't make much sense and made me sound like a massive noob (it was like 4 in the morning). I was trying to get the tags that the user would put in to render the same as [refer to the image in the question]
I was able to conditionally render a span element above the textarea which would render each tag within a span element, dynamically. This achieved the desired result.
Hopefully, this will be helpful to someone looking to solve a similar problem.
I'm doing some work in React, and want to be able to auto-expand my custom components so that I don't have to keep manually adding <, /> and >.
Since Emmet already expands traditional markup (div, h1, etc.) I was wondering if I could expand my own components with some plugin/setting. The | character represents my cursor.
How it works right now
import Items from '../components/Items'
...
render() {
return (
<div>
Ite| [Suggestions: Item]
</div>
)
}
...
I see the suggestion, press [Tab], and it expands to this
<div>
Items|
</div>
What I'm looking for
<div>
<Items>|</Items>
</div>
Is there an extension or setting that I need to toggle somewhere to achieve this?
EDIT
Okay after some more working with react, I've found that Emmet will expand certain words but not others? Are my component names just edge cases or am I missing something?
Use Auto Close Tag extension. It immediately adds the closing tag when you type in the opening tag in front.
I've recently looked into using Prettier to help maintain a consistent code structure. I found the Prettier VSCode plugin and saw that it also had an option to use Prettier-eslint. For the most part, it's great, however there is one thing that Prettier does that really drives me nuts.
Let's say I have this in a render function on a React component:
return (
<button
onClick={
(e) => {console.log('Hello, world!');}
}
>
Click Me
</button>
);
This is exactly how I would like the code to be formatted, but Prettier keeps turning it into this:
return (
<button
onClick={(e) => {
console.log('Hello, world!');
}}
>
Click Me
</button>
);
So, it's removing the newlines after the opening bracket and before the closing bracket.
Is there an option to turn this off, or some kind of plugin that I can get to do so (for Prettier and/or Eslint)? I searched around but couldn't find anything that quite covered this.
Thanks!
You're probably not going to like the answer to this question. This is the type of thing Prettier is designed to stop, custom code style. It's not very customizable on purpose.
"By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles."
https://prettier.io/docs/en/option-philosophy.html
Here's a list of all the options available: https://prettier.io/docs/en/options.html
Prettier seems to be the industry standard now, bringing JS development
I need to do something similar to hull.io
For example my user enters this in html:
<div data-test-component="hello#test" data-test-provider="test"> </ div>
So my script should look for it and render the right content.
I did a little experiment :
if ($('div').date('test-component') == "hello#test") {
$ (document).find("[data-test-component = 'hello # test']").html("Hello World")
}
It works, but do not think that is the best way.
In addition to needing several IFs and does not work with multiple elements.
I would like to help with this. Any guidelines, a way forward.
Hull.js is built on top of Aura.js, that offers the component system to do this.
You can have a look at the source here:
https://github.com/aurajs/aura
This might be what you want to use ultimately, since it handles instanciation and cleanup of the components that are