{

How to add comments to render jsx in React


Comments are a useful piece of text in the code about lines of code and are ignored by the interpreter of an application. These will not be displayed by the user.

React is a UI framework with reusable components.

Components can be written using JSX or TSX language and CSS

Comments in React JSX

JSX is a special syntax with uses a mix of JavaScript and HTML. The render method is written with JSX syntax. However, HTML syntax and javascript syntax will not work.

Javascript comments can be used in constructor or callback methods(componentDidMount etc.) or any function or method.

if JSX uses javascript comments, It will be displayed on the browser.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class First extends Component {
    constructor(props) {
        super(props);
        //constructor comments

    }

    componentWillMount() {

    }

    componentDidMount() {
    //constructor comments
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>
                /* This is multi comments text */
                // Single line comments
                First component
            </div>
        );
    }
}

First.propTypes = {

};

export default First;

Displayed on browser: How to add comments to react jsx render method

So there is a special syntax for adding comments to jsx

Syntax:

{
    // javascript syntx expression 
    /** this is multi line comments ofsyntax
}

or

{
    // this is a single line of syntax
}

That’s how javascript comments wrapper inside {}.

Important points jsx comments in react application

  • JavaScript comments are wrapped inside a parenthesis {}.
  • Single line comments can be included with closing parenthesis } in a new line
  • comments not displayed in browser page as well as source code
  • special syntax {} applied the code inside a single element of return of render method
  • In render method outside element, you can use normal javascript syntax style

You can check comments usage example below

render() {
        /* multi line  valid comments  */
        // single line valid comments
        return (
            /* multi line  valid comments */
            // single line valid comments
            <div>
                {/* This is multi comments special syntax
                line2
                 */}
                {// Single line special syntax comments
                }
                    First component
            </div>
        );
    }
}

Invalid comments in jsx

Below are invalid comments declarations.

  render() {
        return (
            <div>
                // single line invalid comments
                /* multi line invalid comments
                {// Single line invalid comments}
                    First component
            </div>
        );
    }

This will throw a react error by the compiler - Unexpected token, expected }

Wrapped up

Comments can also be included in react JSX with special syntax.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React