I'm trying to create a Job platform, Where we can Sign up/login as either "Recruiter" or as a "Candidate". The complication I'm facing is I've created a form for both recruiter and candidate. Now I'm trying to switch between those componets. I've come this far

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>
    )
}

Components are within their own context. But I have trouble even coming up with an idea how to handle or switch components without messing up the styling, the way it needs to be is when one instance opens, close the other conundrum / Form.

I'm sharing the output I've got using the useToggle react rooks Any ideas on how to achieve it with any other hook or with useToggle hook itself or please let me know what I'm doing wrong.

https://www.loom.com/share/d2251bc3b9594782aa0a17aae92c997e {This is the result I've got}

CodePudding user response：

Since thay are two Items you can make use of a boolean and just one state

    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>
        )
    }

CodePudding user response：

I would create an array that represents all form data I need on rendering, and use a simple key{state} to represent them.

  const formsCompsMap = [
    {
      key: "RECRUITER_FORM",
      component: RecruiterForm,
      btnContent: "Recruiter" // or whatever u'ld like
    }
    {
      key: "CANDIDATE_FORM",
      component: CandidateForm,
      btnContent: "Candidate" // or whatever u'ld like
    }
  ]

  const [activeFormKey, setActiveFormKey] = useState(formsCompsMap[0].key);
  const {key, component: ActiveForm, btnContent} = formsCompsMap.find(form => form.key === activeFormKey) || {};

  return (
      <div>
        <form>
            <div className="text-md tracking-wide p-0">
                SignUp Form
            </div>

            <div className="flex flex-row gap-8">
                <button onClick={() => setActiveFormKey(key)}>
                    {btnContent}
                </button>
                <ActiveForm />
            </div>
        </form>
    </div>
  )

CodePudding user response：

as far as I can understand from your question, that you have created 2 from components for recruiter and candidate and want to show either on of em at a time. If not please do comment, I'll rectify the answer.

instead of checking your toggles when you will be rendering components, do before that, also you only need one toggle for this, better use a use state. The initial false state for recruiter and true candidate

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>
)};

This is not the actual/accurate code but just to give you the logical idea. Also just a suggestion, use a custom hook for your parent component (signup.jsx) and put hooks there and import it from their to parent component and may come in use when you are going to submit the forms so that the states and handler functions can have a common place to share.