How to loop over form inputs and get values in react

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.com/@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.com/@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
}

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.