Get data from dynamic form in React

Question

I have some troubles getting data from a form in react. The form itself is dynamic, meaning that some of my fields aren't always there, but only rendered in specific cases.

When attaching these its hard to anticipate how the state of the container should look. And also which handleChange functions should be there. The components in my form are 2 levels deep at least, so the component is in itself rendering the final input component to the DOM.

Did some looking and found that people have been using refs, but there is a lot of negative opinions about this approach. And it does seem kinda... Fiddly.

Question: How could you go about getting all the data from a form when its dynamic?

The setup:

<Form onSubmit={this.acceptOffer.bind(this)}>
<MainProductContainer offer={this.state.offer}/>
<RequirementsContainer requirements={this.state.offer.requirements}/>
<Segment basic textAlign='center'>
   <Button
        type='submit'
        content='Send'
        primary
        loading={this.state.accept_state == 'pending'}>
   </Button>
</Segment>

.

acceptOffer(event) {
    //This is where I want to get all the data from the form
}

So the form fields are in the MainProductContainer and in the RequirementsContainer? — Martin Cup
– Martin Cup, Commented Dec 7, 2016 at 13:08
No. For example the MainProductContainer goes through some logic to decide which product should show in this container. The products themselves are components containing a checkbox. So Form -> MainProductContainer -> Product(contains a field) — days
– days, Commented Dec 7, 2016 at 13:14

Community · Accepted Answer · 2017-05-23 12:08:43Z

1

Here you can find how to do it: React Native how to pass this.setState change to parent

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Dec 7, 2016 at 13:12

Martin Cup

2,5821 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

days Over a year ago

Okay! Seems like you mean that the regular sending the data-as-props way still goes for a dynamic form. In my situation with no way of knowing what variables the user could set in this.state beforehand, I'm gonna try this

Martin Cup Over a year ago

Sorry, I forgot that props are read only, and that you can not change them in you child container. So other ways to access this data is via Flux/Redux or via a function you pass down to your child component which changes the state in the parent.

days Over a year ago

No probs, been working with forms in react before, but not with a dynamic one. The answer i linked had an interesting way of making sure the state had just the wanted data fields. Just wasn't sure if I should go for it or not. This is not the forum for discussion, but i'm not in love with all of this props passing and state updating so far in react when it comes to forms.

Martin Cup Over a year ago

I also had some problems with that in a React Native app too and wanted to use redux in the future, which seems pretty good to handle global state without passing stuff around. So maybe Redux can help you: redux.js.org/docs/introduction/Motivation.html

Collectives™ on Stack Overflow

Get data from dynamic form in React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related