⚠️ This lesson is retired and might contain outdated information.

Access the State of redux-form Fields using the `meta` prop

Rory Smith
InstructorRory Smith
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

In the Field component of redux-form, we have access to the meta prop. This allows us to access information about the state of the field, for example whether the field has been touched, or whether it’s valid.

Instructor: [00:00] The field component of Redux Form provides us with props that we can use to find out about the state of our form field. Let's take a look at our custom input field. There are props here that we've passed in, for example, label and type. There's also props provided by Redux Forms, such as input.

[00:23] Let's take a look and see how these props change as the field changes. Let's add a dependency to help us out here. We're going to add React to JSON View. We'll import that here, so import React JSON from React JSON View.

[00:45] I'm going to use the React JSON component underneath our input, and we're going to pass it our props as the source prop. We'll do that inside both components, hit save, and we'll refresh.

[01:04] Now underneath each input, we can see the props that we get by using Redux Forms field component. Here are the props that we've passed in. We also have this meta object which contains the state of a form field.

[01:23] Furthermore, we have the input object, which is what connects the field to Redux. Let's see how this information changes as we change our field. Instead of showing all the props, we'll show props.meta. If we head over to our name field and we focus it, we notice that immediately, the state of our meta object changes.

[01:52] In this case, active turned to true, and visited turned to true. If we start typing, we can see that pristine turns to false and dirty turns to true. This object will respond every time the field is changed so the state of the form field is accurately represented inside the meta object.

[02:20] This is going to become extremely important for when we begin to use validation on our form.

egghead
egghead
~ 44 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today