Soy muy nuevo en ReactJS y me enfrento a este problema: ¿cómo comentar algún código HTML definido en el método render() ?
Por ejemplo, tengo un componente como este:
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;Traté de comentar una sección del html devuelto por el método render() de esta manera:
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> ); }pero esta mal
¿Qué me estoy perdiendo? ¿Cómo puedo comentar algo de HTML desde aquí?
Hazlo como lo harías en js
<div> {/* <div/> */} </div>En los archivos JSX, puede usar comentarios de bloque dentro de llaves, por ejemplo, {/* My comment */} .
En tu caso:
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> ); } {/* <input onChange={event => this.setState({ term: event.target.value })} /> */} {/*-Value of the input: {this.state.term} */} Dentro del render block , debemos usar los comentarios de varias líneas entre llaves {/* */}.
Esta es unareferencia detallada