Estoy tratando de crear una plataforma de trabajo, donde podemos registrarnos/iniciar sesión como "Reclutador" o como "Candidato". La complicación a la que me enfrento es que he creado un formulario tanto para el reclutador como para el candidato. Ahora estoy tratando de cambiar entre esos componentes. he llegado tan lejos
import useToggle from "@rooks/use-toggle" export default function SignUp() { const [recruitForm, setRecruitForm] = useToggle(true); const [candidateForm, setCandidateForm] = useToggle(false); } return ( <div> <form> <div className="text-md tracking-wide p-0"> SignUp Form </div> <div className="flex flex-row gap-8"> <div> <button onClick={setRecruitForm}> Recruiter </button> <> {recruitForm && <RecruiterForm /> } </> </div> <div> <button onClick={setCandidateForm} type="button"> Candidate </button> <> {candidateForm && <CandidateForm /> } </> </div> </div> </form> </div> </div> ) }Los componentes están dentro de su propio contexto. Pero tengo problemas incluso para tener una idea de cómo manejar o cambiar componentes sin estropear el estilo, la forma en que debe ser es cuando se abre una instancia, se cierra el otro acertijo / Formulario.
Estoy compartiendo el resultado que obtuve usando useToggle react rooks. Cualquier idea sobre cómo lograrlo con cualquier otro gancho o con el mismo gancho useToggle o hágame saber qué estoy haciendo mal.
https://www.loom.com/share/d2251bc3b9594782aa0a17aae92c997e {Este es el resultado que tengo}
Dado que son dos elementos, puede utilizar un booleano y solo un estado
const [active, setActive] = useState(false) return ( <div> <form> <div className="text-md tracking-wide p-0"> SignUp Form </div> <div className="flex flex-row gap-8"> <div> <button onClick={()=>setActive(true)}> Recruiter </button> <> {active && <RecruiterForm /> } </> </div> <div> <button onClick={()=>setActive(false)} type="button"> Candidate </button> <> {!active && <CandidateForm /> } </> </div> </div> </form> </div> </div> ) }Por lo que puedo entender de su pregunta, ha creado 2 componentes para el reclutador y el candidato y desea mostrar uno de ellos a la vez. Si no, por favor comente, rectificaré la respuesta.
en lugar de verificar sus alternancias cuando renderice componentes, haga antes de eso, también solo necesita una alternancia para esto, mejor use un estado de uso. El estado falso inicial para reclutador y candidato verdadero
import React, {useState} from 'react'; export default function SignUp() { const [switchForm, setSwitchForm] = useState(false); return ( <div> <form> <div className="text-md tracking-wide p-0"> SignUp Form </div> <div className="flex flex-row gap-8"> <button onClick={setSwitchForm(false)}> Recruiter </button> <button onClick={setSwitchForm(true)} type="button"> Candidate </button> </div> <div className="flex flex-row gap-8"> <> {switchForm ? <CandidateForm /> : <RecruiterForm />} </> </div> </form> </div> </div> )};Este no es el código real/preciso, sino solo para darle una idea lógica. También solo una sugerencia, use un enlace personalizado para su componente principal (signup.jsx) y coloque enlaces allí e impórtelos desde su componente principal y puede usarse cuando vaya a enviar los formularios para que los estados y el controlador funcionen. puede tener un lugar común para compartir.