Formik - name and ID are not being passed to Field

user_13969419 0
Viewed 2750

I have a component like below, and when I pass name prop or an ID, it is not being passed to a component and I can check two radio buttons at once. Also ,how can I update a predefined field in initial values with value of a checked radio button?

In React Devtools it looks ok enter image description here

I get the following error

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:

import React from "react";
import { Heading, OptionCard } from "../..";
import data from "../../../../lang/pl.json";
import { Field } from "formik";

export const Step1 = ({
    errors,
    touched,
    values,
    handleChange,
    handleBlur,
    handleSubmit
}) => {
    console.log(values, errors, touched);
    return (
        <>
            <div className="bottomSeparator mb-4">
                <Heading variant="h3">{data["global.offer-details"]}</Heading>
            </div>
            <Heading variant="h5" bsClasses="my-1" info>
                {data["global.category-offer"]}
            </Heading>
            <div className="row">
                <div role="group" className="col-12">
                    <div className="col-xs-6 col-lg-3">
                        <Field
                            type="radio"
                            component={OptionCard}
                            value={data["create.blade.text-1"]}
                            name={values.kategoria}
                            onChange={handleChange}
                            id={data["create.blade.text-1"]}
                            name={data["create.blade.text-1"]}
                        />
                    </div>
                    <div className="col-xs-6 col-lg-3">
                        <Field
                            type="radio"
                            component={OptionCard}
                            value={data["create.blade.text-2"]}
                            name={values.kategoria}
                            onChange={handleChange}
                            id={data["create.blade.text-2"]}
                            name={data["create.blade.text-2"]}
                        />
                    </div>
                </div>
                <div className="row mb-3">
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="form-group">
                            <label>
                                {data["global.category-offer"]}{" "}
                                <span className="red">
                                    {data["global.required"]}
                                </span>
                            </label>
                            <select
                                id="type"
                                name="type"
                                className="d-block"
                                required="yes"
                            >
                                <option value="course">
                                    {data["create.blade.text-1"]}
                                </option>
                                <option value="private_lesson">
                                    {data["create.blade.text-2"]}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

thanks

formik reactjs forms
1 Answers

You have values formik variable. You defined name as name={values.kategoria} (example). When page renders, you have name={values.kategoria} equals to "".

You have also doubled name props, make always according to your data variable as you import it, as you did here name={data["create.blade.text-1"]}

Also good thing to do:

You define initialValues and assign your data to your initialValues. After, you are using {values} variable inside render component, example here:

user_82801120
Related