0

tengo una duda al hacer uso del useState de React, quería saber si se pueden guardar componentes en el useState como hago en el siguiente ejemplo, no se si estoy es una mala practica o por convención no se debería hacer de esta manera, al final la finalidad de esto es que dependiendo de si el usuarios existe me carga 1 formulario y otro distinto al principal.

import React, { useState } from 'react';
import Head from '../components/Head';

import { Container } from 'semantic-ui-react';
import FormCheckAccount from '../components/SignIn/FormCheckAccount';
import FormLogin from '../components/SignIn/FormLogin';
import FormCreateAccount from '../components/SignIn/FormCreateAccount';
import { ReactComponent as CecotecLogo } from '../static/ic_cecotec.svg';

import './sign-in.scss';

function SignIn(props) {
  const { localizedUrl } = props;


  const checkAccountExists = email => {
    const exists = true;

    if (exists) {
      console.log('Usuario encontrado:', email);
      setView(<FormLogin checkAccountExists={checkAccountExists} />);
    } else {
      setView(<FormCreateAccount checkAccountExists={checkAccountExists} />);
    }
  };

  const [view, setView] = useState(<FormCheckAccount checkAccountExists={checkAccountExists} />);

  return (
    <>
      <Head
        themeColor="#e5e3e2"
        favicon="/static/favicon.ico"
        title="Productos de ..."
        description="Descripción del producto"
      />

      <div className="sign-in">
        <Container text className="logo">
          <CecotecLogo />
        </Container>
        <Container text className="form-sign-in">
          {view}
        </Container>
      </div>
    </>
  );
}

export default SignIn;

Un saludo y muchas gracias.

2
  • Y el código te funciona? O te arroja algún tipo de error? Commented el 26 jun. 2019 a las 13:11
  • Me funciona perfectamente. Commented el 26 jun. 2019 a las 15:33

1 respuesta 1

1

Nunca había visto que alguien guardara componentes en un state, pero no parece mala idea para algunas situaciones! Sin embargo, para este tipo de problemas, no creo que sea la solución ideal. Yo preferiría guardar el valor de exists en un estado, y dentro de tu componente puedes renderizar bajo tu preferencia:

  <Container text className="form-sign-in">
    { exists
      ? <FormLogin />
      : <FormCreateAccount />
     }
  </Container>

Espero haber sido claro. Saludos!

1
  • Muy claro, muchas gracias. Commented el 1 jul. 2019 a las 6:48

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.