I am trying to render initialValues for a form using redux-form-material-ui. So far initialValues are working for my TextField components but not for SelectField.
I am currently passing initialValues as a prop through the parent component like this:
<PacketFilterForm initialValues={this.props.initialConfigValuesForForm} />
This is working on this case:
<Field name="name" component={TextField} hintText="Ex. Rule 1" floatingLabelText='Name of Rule'/>
However, it is not working for this case:
<Field component={SelectField} name='ethertype'>
<MenuItem key={1} value='ipv4' primaryText="IPV4" />,
<MenuItem key={2} value='ipv6' primaryText="IPV6" />
</Field>
How can I set an initialValues for this SelectField component?
try in your componentWillMount() because Form component of redux form works with name and value
componentWillMount() {
this.props.change('ethertype', 'ipv6')
}
Related
I need to write an adapter for a component, to which I need to pass certain props. For example, I have a component which can receive certain props as "disabled", but I cannot indicate it in the tag of react form. I need to do this using typescript
In React final Form :
<Field name="email" component={mycomponent}>
</Field>
"mycomponent" is the one I need to be able to pass a prop, for example "disabled"
All props other than FieldProps are passed down to the component. So you could write:
<Field name="email" component={MyComponent} disabled={true}>
</Field>
than MyComponent would receive disabled prop.
I am not able to code in the right way such that formik.values will reflect into Material UI's Checkbox
Checkboxes are a little tricky to include in third party forms packages, and Material UI doesn't help with that either.
What you need to do is use the FormControlLabel component to handle the onChangge event that formik needs. Then on the Checkbox you just set the checked prop to be whatever formik has in its values.
Here is an example I use for a Checkbox to set an isAdmin value.
const formik = useFormik({
initialValues:{
isAdmin: false
},
});
<FormControlLabel
control={<Checkbox checked={formik.values.isAdmin} />}
label="is Admin"
name="isAdmin"
onChange={formik.handleChange}
/>
Using 'as'
Use the as prop with Formik Field and pass any props required to the Field itself. It will pass them onto FormControlLabel. For example, here the label field is passed down to FormControlLabel:
<Field
type="checkbox"
name="myFormikName"
as={FormControlLabel}
control={<Checkbox />}
label="This will trigger my formik name field"
/>
Multiple checkboxes using 'as'
If you have multiple checkboxes with the same name (array) you need to pass the "checked" value like so. Checks if the Formik 'name' array includes the name.
const { values } = useFormikContext()
render (
{names?.map(name => (
<Field
type="checkbox"
name="names"
value={name.fullName}
key={name.id}
as={FormControlLabel}
control={<Checkbox/>}
checked={values.names.includes(name.fullName)}
label={name.fullName}
/>
))}
)
Using 'setFieldValue'
const { values, setFieldValue } = useFormikContext()
<FormControlLabel
control={<Checkbox />}
label="My mui label"
checked={values.myMuiCheck}
onChange={() =>
setFieldValue(
'myMuiCheck',
!values.myMuiCheck,
)
}
/>
I want to access the validate props inside the custom component,
This is my component
<Field name="firstName" validate={[ required() ]} label="First Name" component={MyCustomComponent} />
MyCustomComponent.jsx
function MyCustomComponent(props){
const isRequired = props.validate
return(<div> <span>*<span> .... </div>)
}
Can't access validate props inside mycustom component.
Can't seem to find a reason why the first approach works, and the second doesn't.
Works: pastebin
Doesn't: pastebin
The difference between these two is that there's <TextField> in the second one instead of <div> and <Field>. But the examples I've seen makes the <TextField> work just fine, what am I missing?
You have to pass the component to <Field />:
<Field component={TextField} name="password">
You are now trying to use it like so:
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
render={props => (
<Form>
<TextField
id="name"
name="name"
label="Name"
value={props.values.name}
onChange={props.handleChange}
fullWidth
/>
</Form>
)}
/>
... Which should work, are you getting any errors in the console?
If that doesn't work for some reason you can try doing it via Field render props.
This snippet is taken from the Formik docs.
<Formik
...
<Field
name="lastName"
render={({ field }) => (
<input {...field} placeholder="password" />
)}
/>
...
/>
You see you can use a render props to the Field component to render a custom component if you like.
There are 3 ways to render things with <Field>.
Aside from
string-only component, each render prop is passed the same props for
your convenience.
Field's render props are an object containing:
field: An object containing onChange, onBlur, name, and value of the
field form: Formik state and helpers Any other props passed to field
See more in Formik docs here.
I'm very new to react, redux and redux-form (and frontend in general :D).
I have a component with a form and a Field with a custom component.
const SomeComponent = ({ .. }) => (
<div>
...
<Field
name="someName"
component="select"
...
/>
<Field
name="someName"
component={CustomComponent}
...
/>
</div>
)
When I create this component:
<SomeComponent
form={form}
onSubmitSuccess={(data, dispatch) => dispatch(reset(form))} />
The first field is cleared correctly but the second it's not. What do I have to do to make my CustomComponent aware of the reset?