Get all values table row input boxes

Question

I am new to react and I have some difficulties retrieving the values of input boxes of the rows in a table.

On my render method I have a form, table and save all button,

render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>

      { (this.state.inputList.length > 0) ?
        (<div>
          <table id='configtable'>

            <tbody>
              {this.state.inputList}
            </tbody>
          </table>

          <table id="table-footer">
            <tfoot>
            <tr>
              <td />
              <td>
                <input name="fwdAllNumber" type="number" placeholder="Phone Number"  pattern="[0-9]*" inputMode="numeric" onChange={this.handleFwdAllInput}/>
              </td>
              <td>
              <ButtonGroup className="button-group-right">
                <Button className="config-button" type="submit" value="Submit" onClick={this.saveAll}>Save All</Button>
              </ButtonGroup>
              </td>
            </tr>

          </table>
          </div>
        )  : (<div><br/><h4>No Phone Numbers currrently exist. Please click "Add Phone Number" to begin</h4></div>)}
        </form>
        </div>
      )
    }
  })

addRow method adds a row to the render method onPress of "Add row" button

addRow(event) {
    const inputList = this.state.inputList;
    const index = this.state.index;
    let rows = this.state.rows;

    const row = (
      <tr key={ inputList.length } name={ inputList.length }>
        <td key={index}><input name={'phone_'+index} type="number" placeholder="Foward Phone Number"  pattern="[0-9]*" inputMode="numeric" ref={(input) => this.phone_$index = input} type="text"/> </td>
        <td><input name={'fwd_'+index} type="number" placeholder="Foward Phone Number"  pattern="[0-9]*" inputMode="numeric" ref={(input) => this.fwd_$index = input} /></td>
          <td id="forwarded-indicator">
          <div id="forwarded-indicator-div" />
        </td>
      </tr>
    );
}

I need to get all the values of input boxes in all rows when I hit the saveAll button.

I tried,

handleSubmit: function(event) {
  event.preventDefault();
  let rows = this.state.rows;
  const tableValues = this.state.inputValueList;

  let configVal = [];
  for(let i = 0; i < rows.length; i++){
    console.log(this.phone_ + i.value);
  }
},

But I get Nan here and on console I get,

<input type="text" name="phone_0" placeholder="Foward Phone Number" pattern="[0-9]*" inputmode="numeric">
<!-- react-text: 162 -->
<!-- /react-text -->

I would be really appreciate if anyone could help me onSubmit Thank you

Answer 1

Issue is in the way you are assigning ref to input elements here:

ref={(input) => this.fwd_$index = input}

Use this:

ref={(input) => this[`fwd_${index}`] = input}

Then fetch the value by using:

this[`fwd_${index}`].value

Check the working example:

 class App extends React.Component{ submit(e){ e.preventDefault(); for(let i=0; i< 4; i++) console.log('value', this[`input_${i}`].value); } render(){ return( <form onSubmit={this.submit.bind(this)}> { [1,2,3,4].map((el,i) => <input ref={inp => this[`input_${i}`] = inp} key={i}/>) } <input type='submit'/> </form> ) } } ReactDOM.render(<App/>, document.getElementById('app')); 

 input{ display: block; margin-bottom: 20px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/> 

Suggestion:

Instead of using multiple ref , use controlled component and store the data in state variable, We should avoid the use of ref .