given the following:

constructor () {

    super();
    this.state = {
        inputs : [
            { type: 'email', placeholder: 'Email Address' }
        ]
    };

}

render () {
  return {
    <div>

    {
      // Itterates over all inputs in the current state
      this.state.inputs.map((item, i) => (
        <Input key={i} id={'input-' + i} ref={'input-' + i} type={item.type} placeholder={item.placeholder} />
      ))
    }

     <button onClick={this.submit.bind(this)}>submit</button>

   </div>

  };
}

How would i get the values once the form is submitted? e.g.

submit () {
  // Need to loop over inputs and get values for all of them.
}

given the following:

constructor () {

    super();
    this.state = {
        inputs : [
            { type: 'email', placeholder: 'Email Address' }
        ]
    };

}

render () {
  return {
    <div>

    {
      // Itterates over all inputs in the current state
      this.state.inputs.map((item, i) => (
        <Input key={i} id={'input-' + i} ref={'input-' + i} type={item.type} placeholder={item.placeholder} />
      ))
    }

     <button onClick={this.submit.bind(this)}>submit</button>

   </div>

  };
}

How would i get the values once the form is submitted? e.g.

submit () {
  // Need to loop over inputs and get values for all of them.
}

• javascript
• reactjs
• ecmascript-6

• this.state.inputs.map((x,i)=>{ this.refs['input-'+i].value }) – Rajesh Commented Dec 19, 2016 at 9:11

3 Answers 3

I have restructured the codes with some best practices. Let me know if you have any questions around it.

state = {
    inputs : [
        { type: 'email', placeholder: 'Email Address', id: 'email' },
        { type: 'text', placeholder: 'Your Name', id: 'name' },
    ]
},

submit = () => {
  // Need to loop over inputs and get values for all of them.
  this.state.inputs.map((input) => {
    const node = ReactDOM.findDOMNode(this.refs[input.id]);
    // do what you want to do with `node`
  })
},

renderInput = (input) => {
  // element index as key or reference is a horrible idea
  // for example if a new input is unshifted it will have the same 
  // reference or key, which will render the idea of key, reference invalid

  return (
    <Input 
      id={input.id} 
      key={input.id} 
      ref={input.id} 
      type={input.type} 
      placeholder={input.placeholder} 
    />
  );
}

render () {
  return (
    <div>
      { this.state.inputs.map(this.renderInput) }
      <button onClick={this.handleSubmit}>submit</button>
    </div>
  );
}

Problems I have found

1. setting key as index is an antipattern. Read more of it https://medium./@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

2. binding this inside render is an antipattern. Use es7 class properties to tackle this. Or you can bind the methods inside your constructor. Read more on binding https://medium./@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.uzdapuc4y

solution 1:

constructor(props) {
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
}

solution 2:

handleSubmit = () => {
  // do you stuff
}

You can can just use map to loop over them to get their value similar to how you create them

submit () {
  // Need to loop over inputs and get values for all of them.
      this.state.inputs.map( function(item, i) {
        console.log(ReactDOM.findDOMNode(this.refs['input-' + i]).value);
      }.bind(this))
}

In react to know your form input, you should use refs property in each input or element. like below

<input type="text" ref="myInput" />

then onclick or in your map function you can loop through your all refs.

handleClick: function() {
if (this.refs.myInput !== null) {
    var input = this.refs.myInput;
        var inputValue = input.value;

}

}

hope this will helpful to you.