Why Wont Fields Show When Using Ionic?

Im tryng to make a log in screen with formik and im using ionic react but when im using fields component from formik the input is not working. Like i cant see what im typing. heres the code

import { gql, useMutation } from "@apollo/client"
import { ErrorMessage, Field, Form, Formik } from "formik"
import React from "react"
import { Link, useHistory } from "react-router-dom"
import * as Yup from "yup"
import { IonContent, IonPage, IonInput } from '@ionic/react'

const  REGISTER_MUTATION = gql`
	mutation register($name: String, $email: String!, $password: String!) {
		register(name: $name, email: $email, password: $password) {
			token
		}
	}
`

interface RegisterUser {
	email: string
	password: string
	name: string
}

function Register() {
	const history = useHistory()
	const [ register, { data } ] = useMutation(REGISTER_MUTATION)

	const initialValues: RegisterUser = {
		email: "",
		password: "",
		name: ""
	}

	const validationSchema = Yup.object({
		email: Yup.string().email("Invalid email address").required("Email Required"),
		password: Yup.string().max(20, "Must be 20 characters or less").required("Password Required"),
		name: Yup.string().max(15, "Must be 15 characters or less").required("Name Required")
	})

	return (
		<IonPage>
			<IonContent color="primary">
		<div className="container">
		
			<h3>Sign up</h3>
			<Formik
				initialValues={initialValues}
				validationSchema={validationSchema}
				onSubmit={async (values, { setSubmitting }) => {
					setSubmitting(true)
					const response = await register({
						variables: values
					})
					localStorage.setItem("token", response.data.register.token)
					setSubmitting(false)
					history.push("/")
				}}
			>
				<Form>
					<Field color="secondary" name="email" type="text" placeholder="Email" />
					<ErrorMessage name="email" component={"div"} />
					<Field name="name" type="text" placeholder="Name" />
					<ErrorMessage name="name" component={"div"} />
					<Field name="password" type="password" placeholder="Password" />
					<ErrorMessage name="password" component={"div"} />
					<button type="submit" className="login-button">
						<span>Sign up</span>
					</button>
				</Form>
			</Formik>
		</div>
		</IonContent>
		</IonPage>
	)
}

export default Register

should i change it to IonInput instead of using fields or is it just a problem with my code. And also everything works like i can signup and everything will work fine its just that the input/Field doesnt show what im typing.

1 post - 1 participant

Read full topic