React - How to get input from looped <form>?

Question

I am new on React. I have a condition which is to loop the form, please help me

Here is the code:

this.state.products.map(product => {
   <form onSubmit={this.handleSubmit}>
        <select name="size" className="form-control" style={{height: '46px;'}}>
           <option key="1" value="1">Red</option>
           <option key="2" value="2">Yellow</option>
           <option key="3" value="3">Green</option>
         </select>
        <input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
   </form>
});

If there was 3 form, how to get the selected value from clicked submit button form? Or is there another simple way? Thank you

Naismith · Accepted Answer · 2018-11-16 03:17:28Z

3

One method would be changing how your onSubmit function is handled.

So you could pass which index of products you are submitting like so

this.state.products.map((product, i) => {
   <form onSubmit={event => this.handleSubmit(event, i)}>
        <select name="size" className="form-control" style={{height: '46px;'}}>
           <option key="1" value="1">Red</option>
           <option key="2" value="2">Yellow</option>
           <option key="3" value="3">Green</option>
         </select>
        <input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
   </form>
});

It also looks like your form is uncontrolled, which another possibly is having the select change a value in state.

<select name="size" onChange={e => this.handleChange(e, i)} className="form-control" style={{height: '46px;'}}>
  <option key="1" value="1">Red</option>
  <option key="2" value="2">Yellow</option>
  <option key="3" value="3">Green</option>
</select>

and in your handleChange, you would change a value in state that would correspond to the product from your state.

answered Nov 16, 2018 at 3:17

Naismith

2662 silver badges9 bronze badges

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

2 Comments

R . dwj Over a year ago

Thank you for your fast response i really appreciate, but could you post the following method? handlechange and handlesubmit

Naismith Over a year ago

@R.dwj here's a codesandbox with everything working codesandbox.io/s/7j6o6qk05j

Santiago Pernigotti · Accepted Answer · 2018-11-16 04:39:37Z

You can use a ref to get form values from the DOM.

Here you need one ref per product, so you could use the index of product to save the ref and also to submit de form.

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };

    this.selectByProduct = {};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event, productIndex) {
    event.preventDefault();
    const size = this.selectByProduct[productIndex].value;
    console.log(`you submitted the size ${size} of product ${productIndex}`)
  }

  render() {
    return this.state.products.map((product, i) => (
      <form onSubmit={event => this.handleSubmit(event, i)}>
          <select ref={select => this.selectByProduct[i] = select} name="size" className="form-control" style={{height: '46px;'}}>
            <option key="1" value="1">Red</option>
            <option key="2" value="2">Yellow</option>
            <option key="3" value="3">Green</option>
          </select>
          <input type="submit" value="Pick This" className="form-control" />
      </form>
    ));
  }
}

Collectives™ on Stack Overflow

React - How to get input from looped <form>?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related