Come rendere l’elemento al clic del pulsante: ReactJS

Sto cercando di rendere un paragrafo non appena si fa clic sul pulsante.

Ecco il mio codice.

import React, { Component } from 'react'; class App extends Component { constructor() { super(); this.createText = this.createText.bind(this); } createText() { return( 

hello friend

) } render() { return (
); } } export default App;

Qui sto cercando di rendere “ciao amico” quando si fa clic sul pulsante. Ma non sta funzionando.

Questo non è il modo corretto perché createText è un gestore di eventi che non renderà l’elemento, ciò di cui hai bisogno è “Rendering condizionale di elementi”.

Controlla documenti per ulteriori dettagli Rendering condizionale .

passi:

1- Utilizzare una variabile di stato con valore iniziale false .

2- Onclick del pulsante aggiorna il valore su true .

3- Usa quel valore di stato per il rendering condizionale.

Codice di lavoro:

 class App extends React.Component { constructor() { super(); this.state = { isShow: false } this.createText = this.createText.bind(this); } createText() { this.setState({ isShow: true }) } render() { return ( 
{this.state.isShow &&

Hello World!!!

}
); } } ReactDOM.render(, document.getElementById('app'))