React: Reusable components design pattern

29 views Asked by At

I have 3 similar forms and i can't understand should i make h1, divider, link reusable if they are in every form but with different labels. Thanks.

Here, is my code:

    <>
      <Form id="form" onSubmit={handleSubmit}>
        <h1>Sign in to SyncTalk</h1> // this title
        <GoogleButton label="Sign in" />
        <Divider className="divider">or</Divider> // this divider
        <div className="input-container">
          <StyledTextField
            type="email"
            name="email"
            label="Email"
            variant="outlined"
            value={values.email}
            onChange={handleChange}
          />
          <ErrorMessage name="email" component="div" className="error" /> // this
        </div>
        <div className="nav">
          <FormButton label="Send link" />
          <div className="to-sign-in">
            Don't have an account?
            <Link href="/sign-up">Sign up</Link> // this link
          </div>
        </div>
      </Form>
      <Alert alertLabel={alertLabel} />
    </>;
0

There are 0 answers