In html to create a comment we use:
<!-- Write your comments here -->
What is its equivalent in React while using React components in the return section of a react component? Sometimes I just want to place some comments like
<!-- <MyComponent .... /> -->
but I can not do it in this way
You cannot do regular HTML comments in jsx, the closest you can get is JS-style comments -
{/* This is a comment */}
You have to wrap in curly braces, and then block comment: {/* <div /> */}
As mentioned in comments. You can write comments in React like below
{ /* <MyComponent .... /> */ }
Can add comment in React code on the one line
// comment
Comment in other place than is html tags for more rows
/* comments*/
But comment can add and to return part of class with {/* coments*/}. This away can get possibility write comments to more lines, like is can write comments to Java, C++, Javascript
write comments as you might do in HTML and XML with <!-- --> syntax.
will throw Unexpected token error.
To write comments in JSX, you need to use JavaScript’s forward-slash and asterisk syntax, enclosed inside a curly brace {/* comment here */}.
Here’s the example:
export default function App() {
return (
<div>
<h1>Commenting in React and JSX~ </h1>
{/* <p>My name is Bob</p> */}
<p>Nice to meet you!</p>
</div>
);
}
Ref
Related
My HTML content is coming from an API (Gatsby in this case) so I'm using dangerouslySetInnerHTML as recommended. The thing is, it messes with my styling, specifically with grids. I have a html markup like this:
<article>
<h2>Title of the post<h2>
<small>Date of the post</small>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
This <article> tag contains a display: grid style. But all the content inside that div is taking precious space making it hard to style (also it's not an useful div!). All the important html is inside but I want to get rid of the actual <div> tag. Is there any way to do it?
Note: I already tried to {post.html} it directly but it's encodedURI which can't be decoded.
Thank you!
Check out the react docs for dangerouslySetInnerHTML.
you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key...
So there's nothing stopping you from forming your own html string from different parts of your graphql query like so:
const createFullPostMarkup = () => {
return { __html: `<h2>Title of the post</h2><small>Date of the post</small>${ post.html }` }
}
And then setting it later as inner html on your article like this:
<article dangerouslySetInnerHTML={createFullPostMarkup()} />
Remember, this is just an object with a __html key. You can put anything in there.
Note: What I think you might be after is described by this open feature request. For your use case, i think the above solution works perfectly. But if you're still not satisfied, check out the discussion in the linked issue.
You can also do this:
/**
* Load CSS file in parallel vs a blocking <link /> tag
*
* #param {string} fontUrl The raw font URL
*/
const LoadCSSFile = ({ fontUrl }) => {
// hilariously bad hack to get around React's forced wrapper for dangerouslySetInnerHTML
// #see https://github.com/facebook/react/issues/12014#issuecomment-434534770
let linkStr = '</style>';
linkStr += `<link rel="preload" href="${fontUrl}" as="style" onload="this.rel='stylesheet'" />`;
linkStr += `<noscript><link rel="stylesheet" href="${fontUrl}"></noscript>`;
linkStr += '<style>';
return <style dangerouslySetInnerHTML={{ __html: linkStr }} />;
};
This will output as:
<style></style>
<link ... />
<noscript><link ... /></noscript>
<style></style>
Definitely not the most elegant solution but it should accomplish what you need until React supports dangerouslySetInnerHTML on fragments.
I am creating a react styleguide. I am not using any markdown.I want to display component, description, source code of the component. I can display them using code tag if I keep the entire source code in a variable and display them. (see below)
render() {
var text = `<h1>Helllooo</h1>`;
return (
<div>
<pre>
<code>
{text}
</code>
</pre>
</div>
);
}
But is there any way I can get the source code using a url and display inside code tag
for example get the code from components/Button/index.js and display it inside code tag ? Please help!
There are a few libraries that might help you with what you want to do. Try searching for 'jsx to string'.
I've personally used react-element-to-jsx-string and it worked pretty well.
What you are essentially trying to do here is to render HTML markup using React. Your markup can still be in string format, but ideally, they should be received via props and not be hardcoded in a component.
React by default offers dangerouslySetInnerHTML as a way to accomplish this. But that is not recommended due to security reasons - https://reactjs.org/docs/dom-elements.html
As Grandas suggested, try using a library or a plugin to do the same. html-react-parser is one alternative I could think of - https://github.com/remarkablemark/html-react-parser
You can try storing it in array instead of Sting
You can visit https://jsfiddle.net/rajatdhoot/ara1mdam/1/
to run the code
class Hello extends React.Component {
render() {
var text = [<h2>Hello</h2>]
return text
}
}
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
Html Code
<div id="container">
</div>
In React 16.2, improved support for Fragments has been added. More information can be found on React's blog post here.
We are all familiar with the following code:
render() {
return (
// Extraneous div element :(
<div>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</div>
);
}
Yes, we need a container div, but it's not that big of a deal.
In React 16.2, we can do this to avoid the surrounding container div:
render() {
return (
<Fragment>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</Fragment>
);
}
In either case, we still need need a container element surround the inner elements.
My question is, why is using a Fragment preferable? Does it help with performance? If so, why? Would love some insight.
It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
The DOM inspector is less cluttered. :-)
You can find the descriptions of some other use cases in this React issue: Add fragment API to allow returning multiple components from render
Adding to all answers above there is one more advantage: code readability, Fragment component supports a syntactic sugar form, <>. Thus the code in your question can be written more easily as:
render() {
return (
<>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
According to docs,
In React, this desugars to a <React.Fragment/> element, as in the example from the previous section. (Non-React frameworks that use JSX may compile to something different.)
Clutter-free, right ?
Note that you still need to use <Fragment> syntax if you need to provide key to the fragment.
Added features not possible before with JSX
Better semantic jsx markup. Wrapper elements are used when needed not because they are forced to.
Less overall dom markup (increased render performance and less memory overhead)
It as simple as when you don't need a wrapper element you aren't forced to use one. Having less elements is great but I think the biggest benefit is being able to render elements in jsx that weren't previously possible and adding better semantic meaning to wrapper elements because they are optional now.
This wasn't possible before:
<select>
{this.renderOptions()}
</select>
Glancing at the following in React 15 you can't tell if the wrapper element is needed or not:
<span>
<h1>Hello</h1>
{this.getContent()}
</span>
As per the reactjs.org docs most important needs of <Fragment> </Fragment> instead of div's are to avoid breaking HTML semantics. When we use div's instead of <Fragment> </Fragment> we break the HTML semantics.
To know more about html semantics. please click
and also there are cases where if you use div's instead of Fragments it will be invalid html, for example look at this code:
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Fragments solve this problem.
When working with React, there are cases where you will need to render multiple elements or return a group of related items. Here’s an example:
function App() {
return (
<h1>Hello React!</h1>
<h1>Hello React Again!</h1>
);
}
If you try to run your app with the code above, you will run into an error stating that Adjacent JSX elements must be wrapped in an enclosing tag. This implies that you need to wrap both elements within a parent div.
function App() {
return (
<div>
<h1>Hello React!</h1>
<h1>Hello React Again!</h1>
</div>
);
}
Doing this will fix the error, but it comes with a degree of risk. You are adding an extra node to the DOM, which is not necessary. In a case like this, where the above is a child component that will be enclosed within a parent component, this becomes a problem.
function Table() {
return (
<table>
<td>This is a Table Component</td>
<Columns />
</table>
);
}
function Columns() {
return (
<div>
<td>Hello React!</td>
<td>Hello React Again!</td>
</div>
);
}
The resulting HTML for the Table component will be invalid because of the additional div that was added.
function Table() {
return (
<table>
<td>This is a Table Component</td>
<div>
<td>Hello React!</td>
<td>Hello React Again!</td>
</div>
</table>
);
}
Let’s take a look at a better way of solving this by using React Fragment, which will not add any additional node to the DOM. The syntax looks like this:
function Columns() {
return (
<React.Fragment>
<td>Hello React!</td>
<td>Hello React Again!</td>
</React.Fragment>
);
}
You can also use the short syntax <></> for declaring a Fragment.
function Columns() {
return (
<>
<td>Hello React!</td>
<td>Hello React Again!</td>
</>
);
}
Using <React.Fragment>...</React.Fragment>, we can add a parent tag to our JSX elements without adding an extra node to the DOM.
you can replace the extra div tags with React.Fragment
writing React.Fragment every time is too long for you. React.Fragment has a shorthand syntax that you can use. It is <>...</>.
When you want to group components but don't want a div tag HTML in the generated HTML, you can use fragment. The generated HTML for <> <p> Hello </p> </> is just this: <p> Hello </p>
If we'd have used div container, the <div>…</div> will be generated too!
I am trying to control the attributes left and right with props but keep coming up with an error
"Syntax error: this is a reserved word"
I've tried several different methods (and looked at various examples on StackO) to solve my answer and keep coming up with error. I've shortened my code to get to the meat and potatoes here.
I have this in my App.js, it works with Pulse.js until I try to pass props
class App extends Component {
render() {
return (
<div className="App">
<Nav />
<Content />
<Pulse top="-124" left="300" />
</div>
);
}
}
export default App;
And here is the code from Pulse.js
class Pulse extends React.Component {
render() {
return (
<Star style={{top: {this.props.top} + 'em'}}></Star>
);
}
}
export default Pulse;
when I enter "this.props.top" as my style, I get my error. I've tried various methods to fix this and continue coming up with errors. Thanks for your help!
<Star style={{top: {this.props.top} + 'em'}}></Star>
Remove the syntactically invalid wrapping {} around this.props.top
<Star style={{top: this.props.top + 'em'}}></Star>
A bit more explanation:
JSX is a "DSL", a domain specific language. It's not Javascript. In JSX, you can put vanilla Javascript expressions inside of curly braces in some places, like
<Star style={...vanilla javascript expression...} />
Once you're inside the curly braces, there's no need for additional curly braces to read variables. You can reference this.props.top without wrapping it in more curly braces.
When you use this syntax: {this.props.top} the compiler gets confused, thinking you're trying to build a javascript object like {a: 'b'} but instead of a, you're trying to use the word this, which is a reserved word in Javascript. The compiler thinks you're trying to do something like {this: this} which is invalid, because the bare word this is a reserved word.
How can I use comments inside the render method in a React component?
I have the following component:
'use strict';
var React = require('react'),
Button = require('./button'),
UnorderedList = require('./unordered-list');
class Dropdown extends React.Component{
constructor(props) {
super(props);
}
handleClick() {
alert('I am click here');
}
render() {
return (
<div className="dropdown">
// whenClicked is a property not an event, per se.
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
)
}
}
module.exports = Dropdown;
My comments are showing up in the UI.
What would be the right approach to apply single and multiple line comments inside a render method of a component?
Within the render method comments are allowed, but in order to use them within JSX, you have to wrap them in braces and use multi-line style comments.
<div className="dropdown">
{/* whenClicked is a property not an event, per se. */}
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
You can read more about how comments work in JSX here.
Here is another approach that allows you to use // to include comments:
return (
<div>
<div>
{
// Your comment goes in here.
}
</div>
{
// Note that comments using this style must be wrapped in curly braces!
}
</div>
);
The catch here is you cannot include a one-line comment using this approach. For example, this does not work:
{// your comment cannot be like this}
because the closing bracket } is considered to be part of the comment and is thus ignored, which throws an error.
On the other hand, the following is a valid comment, pulled directly from a working application:
render () {
return <DeleteResourceButton
// Confirm
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
Apparantly, when inside the angle brackets of a JSX element, the // syntax is valid, but the {/**/} is invalid. The following breaks:
render () {
return <DeleteResourceButton
{/* Confirm */}
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
Besides the other answers, it's also possible to use single line comments just before and after the JSX begines or ends. Here is a complete summary:
Valid
(
// this is a valid comment
<div>
...
</div>
// this is also a valid comment
/* this is also valid */
)
If we were to use comments inside the JSX rendering logic:
(
<div>
{/* <h1>Valid comment</h1> */}
</div>
)
When declaring props single line comments can be used:
(
<div
className="content" /* valid comment */
onClick={() => {}} // valid comment
>
...
</div>
)
Invalid
When using single line or multiline comments inside the JSX without wrapping them in { }, the comment will be rendered to the UI:
(
<div>
// invalid comment, renders in the UI
</div>
)
According to the official site, these are the two ways:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
Second example:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
Here is the reference: How can I write comments in JSX?
To summarize, JSX doesn't support comments, either html-like or js-like:
<div>
/* This will be rendered as text */
// as well as this
<!-- While this will cause compilation failure -->
</div>
and the only way to add comments "in" JSX is actually to escape into JS and comment in there:
<div>
{/* This won't be rendered */}
{// just be sure that your closing bracket is out of comment
}
</div>
if you don't want to make some nonsense like
<div style={{display:'none'}}>
actually, there are other stupid ways to add "comments"
but cluttering your DOM is not a good idea
</div>
Finally, if you do want to create a comment node via React, you have to go much fancier, check out this answer.
Two ways to add comments in React Native
// (double forward slash) is used to comment only a single line in React Native code, but it can only be used outside of the render block. If you want to comment in a render block where we use JSX, you need to use the second method.
If you want to comment on something in JSX you need to use JavaScript comments inside of curly braces like {/* Comment here /}. It is a regular / Block comment */, but it needs to be wrapped in curly braces.
Shortcut keys for /* Block comments */:
Ctrl + / on Windows and Linux.
Cmd + / on macOS.
This is how.
Valid:
...
render() {
return (
<p>
{/* This is a comment, one line */}
{// This is a block
// yoohoo
// ...
}
{/* This is a block
yoohoo
...
*/
}
</p>
)
}
...
Invalid:
...
render() {
return (
<p>
{// This is not a comment! oops! }
{//
Invalid comment
//}
</p>
)
}
...
{/*
<Header />
<Content />
<MapList />
<HelloWorld />
*/}
JSX Comments Syntax:
You can use
{/**
your comment
in multiple lines
for documentation
**/}
or
{/*
your comment
in multiple lines
*/}
for multiple lines comment.
And also,
{
//your comment
}
for single line comment.
Note: The syntax:
{ //your comment }
doesn't work. You need to type braces in new lines.
Curly braces are used to distinguish between JSX and JavaScript in a React component.
Inside curly braces, we use JavaScript comment syntax.
Reference: click here
According to React's Documentation, you can write comments in JSX like so:
One-line Comment:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
Multi-line Comments:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
{
// Any valid JavaScript expression
}
If you wonder why it works, it's because everything that's inside curly braces { } is a JavaScript expression.
So this is fine as well:
{ /*
Yet another JavaScript expression
*/ }
JavaScript comments in JSX get parsed as text and show up in your application.
You can’t just use HTML comments inside of JSX because it treats them as DOM nodes:
render() {
return (
<div>
<!-- This doesn't work! -->
</div>
)
}
JSX comments for single line and multiline comments follows the convention
Single line comment:
{/* A JSX comment */}
Multiline comments:
{/*
Multi
line
comment
*/}
Conditional rendering
This approach mentioned on the React docs will also work with nested /**/ comments, unlike the {/**/} approach, e.g.:
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
</>}
Full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, World!</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.14.7/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
before
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
<div>
Also commented out.
/* Anything goes. */
</div>
</>}
after
</div>
,
document.getElementById('root')
);
</script>
</body>
</html>
renders just beforeafter.
Ah, just noticed, one downside of this is that linters like typescript could complain about stuff in the "comment" that is not correct.
Here are 6 ways of commenting in React:
Multi-line TypeScript comment
HTML Attribute comment
Single line JSX comment
Single-line JSX comment
Multi-line JSX comment
Single-line JavaScript comment
/**
* 1. Multi-line
* TypeScript comment
* #constructor
*/
export const GoodQuote = observer(({model} : { model: HomeModel }) => {
console.log(model.selectedIndex)
return useObserver(() =>
<div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}>
<p>{model.quotes[model.selectedIndex]}</p>
{
// 3. Single-line comment
}
{ /* 4. True Single-line comment */}
{ /*
5. Multi-line
React comment
*/ }
</div> // 6. Javascript style comment
)
})