CODEWITHSUNDEEP
reactjsreact-hooksnext.jsangular-reactive-forms
Rich
Rich

Reputation: 4248

Update parent state variable from child React Reactive Form

I am trying to explore react library with next framework. Since I am an angular developer, I like to reuse some of my reactive-form to my new application. I found this library since it has almost the same implementation of reactive-form.

Now, I am using state variable on my parent form; however, whenever I try to update the value from child (which is the reactive form). I cannot accomplish it.

Here's my simple code to replicate this.

import React, { useState } from "react";
import { FieldGroup, FieldControl } from "react-reactive-form";

export default function App() {
  const [isRegistered, setIsRegistered] = useState(false);

  async function submitForm(e) {
    e.preventDefault();
    setIsRegistered(state => !state);
    console.log(isRegistered);
    //await function call .....
  }

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <FieldGroup
        control={form}
        render={({ get, invalid }) => (
          <form onSubmit={submitForm}>
            <FieldControl
              name="email"
              render={TextInput}
              meta={{ label: "Email" }}
            />
            <button type="submit">Submit</button>
            <p>{isRegistered.toString()}</p>
            {isRegistered ? <span>Registered Successfully</span> : null}
          </form>
        )}
      />
      
    </div>
  )
}

Just to keep it short, the form and TextInput is just a model and an element.

As you can see., I am updating my state variable on the submitForm function by putting it as an onSubmit function of my form; however, I am able to trigger the submitForm whenever I am trying to submit, but the state variable value doesn't change.

The thing is, when I try to call the submitForm function outside the child (FieldGroup), I am able to update the value.

I created a sample app so you can check as well.

Upvotes: 4

Views: 456

Answers (2)

Viktor
Viktor

Reputation: 722

I don't know this library, but to me it just looks like the FormGroup is not re-render, because none of it's props are being changed.

The documentation says that passing strict={false} to the <FieldGroup /> component should allow it to re-render when the parent component updates as well. In your given example (thanks for making an example) that also does the trick.

Upvotes: 1

Danila
Danila

Reputation: 18476

It seems like you need to set strict prop to false for FieldGroup, like described here: https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FieldGroup.md

strict: boolean;

Default value: true

If true then it'll only re-render the component only when any change happens in the form group control irrespective of the parent component(state and props) changes.

Upvotes: 1

Related Questions