1

Quiero hacer que cuando le damos click al boton 'Haceme click' te muestre el titulo en este caso:

Hola Mundo

Pero no estaria mostrando nada y no entiendo por que. Solamente me funciona si retorno con console.log o con alert, pero si quiero retornar algun titulo(h1) o algun div no me funciona

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">
export default function Descomposicion() {
    return (

        <div>
            <StyleCSS></StyleCSS>
            <Botton></Botton>

        </div>


    )
    
}


function handleClick () {
    return (
        <h1>Hola Mundo</h1>
    )
}

function Botton (props) {
    return (
        <button onClick={StyleCSS}>Haceme click</button>
    )
}

class StyleCSS extends React.Component {
    render () {
        return (
            <h1 style={
                {
                    color: "royalblue",
                    backgroundColor:"yellowgreen"
                }
            }>Hola</h1>
        )
    }
}

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2 respuestas 2

3

Puedes hacer uso del estado del componente para mostrar u ocultar elementos, aquí un ejemplo:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { showTitle: false };
    }

    render() {
        return (
          <div>
            <button onClick={() => this.setState({ showTitle: true })}>Click</button>
            {this.state.showTitle && (
              <h1>Hola Mundo</h1>
            )}
          </div>
        );
      }
    }

Puedes encontrar más información en la documentación oficial de React https://es.reactjs.org/docs/conditional-rendering.html

Espero haberte ayudado :)

1
  • Muchas gracias, era lo que necesitaba seguire investigando!
    – Ketzell
    el 15 may. 2021 a las 4:28
-1

Al botón en la cual se le hace click, debe tener:

<button onClick="handleClick()"></button> 
2
  • Lo he intentado de esa forma y me sigue sin retornar lo que tengo en la funcion handleCLick
    – Ketzell
    el 15 may. 2021 a las 3:10
  • no te funciona por que no es un simple html, en react se trabaja con jsx, deberias investigar la documentacion para saber mas sobre el mismo
    – Enzo
    el 15 may. 2021 a las 4:18

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.