0

Soy novato utilizando hooks, pero lo que quiero hacer es al darle click en el botón de la función Home, que desplegue el contenido de Contact o Contacto que sería simplemente Youre in Contact y Have a good day !!! Este es mi código de ejemplo, espero que sea de ayuda.

Import React, { useState } from ‘react’;

function Contact() {
    return(
        <h2>Yore in Contact</h2>
        <p>Have a good day !!!</p>
    );
}




function Home() {
    const contact = useState(new Contact())
    return(
        <h2>Youre in Home</h2>
                  <button onClick={contact}>Goto Contact</button>
    );
}
1
  • En React, no es necesario crear la instacia del componente con new, React hace eso internamente, solo tienes que llamarlo como <Contact />
    – Isaac
    el 9 nov. 2019 a las 4:38

2 respuestas 2

0

Intenta con esto, hay errores en tus hooks, ya que no puedes renderizar dos elementos sin que tengan un padre, puedes meter los elementos dentro de un div, o en este caso dentro de un Fragment "<> Elementos... < />"

import React, { useState } from 'react';

function Contact() {
    return(
        <>
          <h2>Yore in Contact</h2>
          <p>Have a good day !!!</p>
        </>
    );
}

function Home() {
    const [contact,setContact] = useState(null);

    return(
        <>
          <h2>Youre in Home</h2>
          <button 
            onClick={
              () => setContact(contact === null ? <Contact /> : null)}
          >
            Goto Contact
          </button>
          {contact}
        </>
    );
}
0

Otra opcion a la respuesta de @Brandon seria esta:

function Home() {
  const [contact, setContact] = useState(false);
  return(
      <>
        <h2>Youre in Home</h2>
        <button 
          onClick={() => setContact(true)}
        >
          Goto Contact
        </button>
        {contact && <Contact />}
      </>
  );
}

En este ejemplo, el state contact seria una bandera que si es verdadera muestra el componente <Contact />.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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