Как в React использовать props в аттрибутах?

Question

[zzmaster]

Я хочу сделать компонент из Formik кнопки

<TextField
                      name="nickname"
                      required
                      id="nickName"
                      label="Nick Name"
                      sx={{width:1}}
                      value={formik.values.nickname}
                      onChange={formik.handleChange}
                      error={formik.touched.nickname && Boolean(formik.errors.nickname)}
                      helperText={formik.touched.nickname && formik.errors.nickname}                      
                    />

Чтобы записывать ее так

<FormikTextField formik={formik} name={"nickname"} label={"Nick Name"} />

Компонент такой

export default function FormikTextField(props) {

    return (
        <TextField
            name={props.name} 
            required
            id={props.name}
            label={props.label}
            sx={{width:1}}
            value={props.formik.values[props.name]}
            onChange={props.formik.handleChange}
            error={props.formik.touched[props.name] && Boolean(props.formik.errors[props.name])}
            helperText={props.formik.touched[props.name] && props.formik.errors[props.name]}                      
        />
    );
}

Однако, label (вероятно и остальное) не передалось.



Как это исправить?

Answer 1

[Семён Федосеев]

Вы можете использовать деструктуризацию или вынести свойства в объект. Пример относительно пропсов, без заинтересованности мной formik.

Попробуйте ознакомиться со следующим материалом:
https://react.dev/learn/passing-props-to-a-component

<FormikTextField formik={formik} name={nickname} label="Nick Name" />

export default function FormikTextField({formik, name, label}) {
    return (
        <TextField
            name={name} 
            required
            id={name}
            label={label}
            sx={{width:1}}
            value={formik.values[name]}
            onChange={formik.handleChange}
            error={formik.touched[name] && Boolean(formik.errors[name])}
            helperText={formik.touched[name] && formik.errors[name]}                      
        />
    );
}

Answer 2

[Алексей Непомнящий]

Вот так

<FormikTextField formik={formik} name="nickname" label="Nick Name" />

Без скобок {}.