0

Getting this error

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

>>Form.js
export const initialLoginValues = {
    email: '',
    password: ''
};

>>index.js

import { initialLoginValues } from '../data/Form'

<Formik
                        initialValues={initialLoginValues}
                        validationSchema={loginValidationSchema}
                        onSubmit={onLoginSubmit}
                    >
                        <CreateLoginForm changeForm={changeForm} forgotPass={forgotPass} />
                    </Formik>

Create Login form


import { AnimatePresence } from 'framer-motion'
import Form from './Form'
import Button from '../shared/Buttons'
import LoginFields from "./LoginFields";

import {
    CreateInvoiceFormHeading as Heading,
    CreateInvoiceFormButtons as Buttons
} from './Components'

const CreateLoginForm = ({ changeForm, forgotPass }) => {


    return (
        <AnimatePresence key={2}>
            <Form>
                <Heading>Log in</Heading>
                <LoginFields forgotPass={forgotPass} changeForm={changeForm} />

            </Form>
        </AnimatePresence >
    )
}

export default CreateLoginForm;

Login Fields

const LoginFields = ({ forgotPass, changeForm }) => {
    const formik = useFormikContext()


    return (
        <TouchScrollable>
            <Wrapper>
                <FieldSet>
                    <Legend>Login Credentials</Legend>
                    <BillFrom>
                        <Input label="Email" name="loginCredentials.email" />
                        <Input label="Password" type="password" name="loginCredentials.password" />
                    </BillFrom>
                    <ForgotPasswordSpacer>
                        <Buttons>
                            {/*<Button type="submit" primary onClick={() => onSubmit(formik.values)}>Login</Button>*/}
                            <Button type="submit" primary >Log in</Button>
                            <Button type="button" primary onClick={changeForm}>Register</Button>
                            <Button type="button" onClick={forgotPass}>Forgot password?</Button>

                        </Buttons>
                    </ForgotPasswordSpacer>
                </FieldSet>

                {formik.submitCount > 0 && formik.errors &&
                    <Errors>
                        {reduceErrors(formik.errors).map((item, index) => (
                            <Error key={index}>{item}</Error>
                        ))}
                    </Errors>
                }
            </Wrapper>
        </TouchScrollable>
    )
}

How do I fix it with this code?

Samuel Minkov-Temis
  • 43
  • 8
  • The error is originating inside of the `CreateLoginForm` component. Please post the code for it and only then we'll be able to help you. – Abir Taheer Feb 11 '22 at 19:28
  • Does this answer your question? [A component is changing an uncontrolled input of type text to be controlled error in ReactJS](https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro) – Abir Taheer Feb 11 '22 at 19:30
  • I don't see you passing a value to any of the input components. If they manage their own values, the issue arises because the variable that you're passing for their value property is not defined initially. If you are depending on formik context this means that the names of the inputs don't match up with those defined in the context. I would double check that first but a quick fix is setting the value of the input components like so `value={ valueVariable || '' }` so that the input always remains controlled – Abir Taheer Feb 11 '22 at 19:51

0 Answers0