How can I comment out some HTML code defined into the return() method of a React component?

Question

I am very new in ReactJS and I am facing this problem: how to comment out some HTML code defined into the render() method?

For example I have a component like this:

import React, {Component} from 'react';

class SearchBar extends Component {

    constructor(props) {
        super(props);

        this.state = { term: '' };

    }

    render() {
        //return <input onChange={this.onInputChange} /> ;
        return (
            <div>
                
                <input onChange={event => this.setState({ term: event.target.value })} />
                Value of the input: {this.state.term}
                
            </div>
        );
    }

    /*
    onInputChange(event) {
        console.log(event.target.value);

    }*/

}

export default SearchBar;

I tried to comment out a section of the html returned by the render() method in this way:

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            <!-- <input onChange={event => this.setState({ term: event.target.value })} /> -->
            <!--Value of the input: {this.state.term} -->

            <p>I want to see only this !!</p>
            
        </div>
    );
}

but it is wrong.

What am I missing? How can I comment out some HTML from here?

Answer 1

In JSX files you can use block comments inside of curly braces, e.g. {/* My comment */}.

In your case:

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
            {/*-Value of the input: {this.state.term} */}

            <p>I want to see only this !!</p>
            
        </div>
    );
}

Answer 2

Do It as you would in js

<div>
{/*
<div/>

*/}

</div>

Answer 3

 {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
 {/*-Value of the input: {this.state.term} */}

Inside the render block, we must use the multi-line comments in curly braces {/* */}.

This is a detailed ref