Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

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

    Rory SmithRory Smith

    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.

    reactReact
    ^16.0.0
    reduxRedux
    ^3.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss