Dynamic Form in React with Redux-Form

Question

Im developing a Soccer Betting system. I want to make a form dynamically and keep the objects in the state with redux-forms.

My basic entity is a Match: Who has a home_team, a away_team, and inputs with a home_result and a away_result.

 matches = [
{
  name: 1,
  type: "group",
  home_team: 1,
  away_team: 2,
  home_result: null,
  away_result: null,
  date: "2018-06-14T18:00:00+03:00",
  stadium: 1,
  channels: [],
  finished: false
},
{
  name: 2,
  type: "group",
  home_team: 3,
  away_team: 4,
  home_result: null,
  away_result: null,
  date: "2018-06-15T17:00:00+05:00",
  stadium: 12,
  channels: [],
  finished: false
},

I want to fill it in a Redux-Form, but get stuck in the best way to make it. I want too that, every time a user changes the values on the input, this is reflected in the State-Json.

just to see if I got it right, every match is a new redux-form with inputs of the result? — Matan Bobi
– Matan Bobi, Commented Mar 21, 2018 at 9:28
This is the problem. Its a good pattern to have a lot of forms on the same page? I was thinking that every match is a part of a big form (every match has your own id). Got it ? — Fernando Maymone
– Fernando Maymone, Commented Mar 21, 2018 at 11:28
How many matches do you show per page? If you want to dynamically create the form by the matches you can pass the matches as an initialValue and map through the array to create Fields in the form. got it or should I post a code as an answer? — Matan Bobi
– Matan Bobi, Commented Mar 21, 2018 at 11:46
I want to create it dynamically Matan. Thats where I get stuck. If you can show some code with redux-form I will aprecciate. — Fernando Maymone
– Fernando Maymone, Commented Mar 21, 2018 at 11:51

Matan Bobi · Accepted Answer · 2018-03-21 12:55:10Z

1

To dynamically create a form, you will need to build your data differently. You need fields object that will look like this(with the matches id):

const fieldsObject = ['match1', 'match2', 'match3']

And a initialValues object that will look like this:

const resultsObject = {
  match1_home: 1, 
  match1_away: 3
}

And so on. Then, the Form will initial its fields based on the initialValues and the names of the fields. The code:

const MyForm = (props) => {
 const { handleSubmit, fields } = props;
return (
    <form onSubmit={handleSubmit}>
      {fields.map(match => (
        <div key={match}>
          <Field
            name={`${match}_home`}
            component="input"
            />
           <Field
            name={`${match}_away`}
            component="input"
            />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  )
}

And the usage will look like this:

<MyForm initialValues={resultsObject} fields={fieldsObject} onSubmit={this.submitForm}/>

edited Mar 21, 2018 at 12:55

answered Mar 21, 2018 at 12:16

Matan Bobi

2,8111 gold badge18 silver badges28 bronze badges

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

2 Comments

Fernando Maymone Over a year ago

It looks nice Matan, but I want that in the state the objects its a json: {match: id:1{ "home_score":1 , "away_score" ; 2} for example. Im being clear? Thanks for the answer

Matan Bobi Over a year ago

you can build the objects from the json with a map function over each key in your json... Have I missed something?

Collectives™ on Stack Overflow

Dynamic Form in React with Redux-Form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related