magiclabs/example-nextjs

Form component does not work in email-form component.

ryan3738 opened this issue · 1 comments

The email-form component at "components/email-form.js" has an error. The <Form/> component causes the error. I changed the <Form/> component to <TextField/> and now it works. Not sure if that is the preferred fix but it worked for me.

import { useState } from 'react'
import { Icon, MonochromeIcons, CallToAction, TextField } from '@magiclabs/ui'

const EmailForm = ({ onEmailSubmit, disabled }) => {
  const [email, setEmail] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    onEmailSubmit(email)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <h3 className="form-header">Login</h3>
        <div className="input-wrapper">
          <TextField
            placeholder="Enter your email"
            size="sm"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            prefix={<Icon inline type={MonochromeIcons.Envelope} size={22} />}
          />

Thanks for providing the <TextField /> solution!