React Form Dynamic Input Fields

Question

I'm trying to create a react form with multiple (dynamic) input fields. Inputs are grouped together as seen in the picture below.

When a user submits the form, I need to get the values selected from each group. The groups are dynamically generated using the map function. I haven't found much on this topic.

My existing code:

<form onSubmit={this.handleSubmit.bind(this)}>
  <div className="container">
    {this.state.food.options.map((food, i) =>
      <div key={i}>
        <h5 style={{marginBottom: 2}}><b>{food.name}</b></h5><br />
          <div>
            {food.options.map((option, k) =>
              <div className="row" key={k}>
                <div className="col-3" style={{flex: '0 0 10%'}}>
                  <input type="radio" name={option.name} value={option.id} style={{height: 20}} />
                </div>
                <div className="col-3">
                  <span style={{paddingTop: 10, fontSize: 12}}>{option.name}</span>
                </div>
              </div>
              )}
            </div>
            <hr />
          </div>
          )}
      </div>
    </form>

please add your state and create demo if you can

Just code
– Just code

2019-01-07 04:27:04 +00:00
Commented Jan 7, 2019 at 4:27 — Just code
– Just code, Commented Jan 7, 2019 at 4:27

31113 · Accepted Answer · 2019-01-07 04:07:41Z

1

You have to use checked attribute instead

And use onChange event for select optionID

<input 
type="radio" 
name={option.name} 
value={option.id} 
style={{height: 20}}  
checked={this.state.optionId[option.name] === option.id}
onChange(this.handleChange)
/>


handleChange = e => {
    this.setState({
      optionId: e.target.value
      });
}

edited Jan 7, 2019 at 4:07

answered Jan 7, 2019 at 3:30

31113

4095 silver badges18 bronze badges

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

4 Comments

Viper Over a year ago

Thanks, but how can this be applied to grouped, dynamic forms?

Viper Over a year ago

Do you have an example?

31113 Over a year ago

For multiple groups : checked={this.state.optionId[option.name] === option.id} onChange(this.handleChange) I have updated the code

31113 Over a year ago

Had my answer helped you?

Collectives™ on Stack Overflow

React Form Dynamic Input Fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related