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.
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.
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?
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')
}
React toolbox seem to require I use state for its input values http://react-toolbox.com/#/components/input. How can I map my redux props to state for use with react-toolbox?
<Input type='text'
label='Name'
name='name'
value={this.state.name}
onChange={this.handleChange.bind(this, 'name')} />
I think if I set it in constructor when redux state changes, it will not update my state?
You need to map redux states to component props.
const mapStateToProps = state => ({
inputBoxValue: state.myReduer.inputBoxValue,
});
Then we can bind the props to the component using
export default connect(mapStateToProps)(myComponent);
And we can use It in our component like regular props.
<Input type='text'
label='Name'
name='name'
value={this.props.name}
onChange={this.handleChange.bind(this, 'name')} />
Redux doc: https://github.com/reactjs/react-redux/blob/master/docs/api.md
Please let me know If I'm missing something?