javascript - Extract Input parameters from react component -

my input component receives index props looks this:

renderlibraryinputform(props) {     return (         <grid>            <row>                 <col xs={6} md={3}>                   <formgroup>                     <controllabel>library name</controllabel>                     <input                       type="text"                       classname="form-control"                       name={`libraryname${props.index}`}                       onchange={this.onaddlibraryinputchange.bind(this, `libraryname${props.index}`)}                     />                   </formgroup>                 </col>                 <col xs={6} md={2}>                   <formgroup>                     <controllabel>available status</controllabel>                     <input                       type="text"                       classname="form-control"                       name={`availablestatus${props.index}`}                       onchange={this.onaddlibraryinputchange.bind(this, `availablestatus${props.index}`)}                     />                   </formgroup>                 </col>                 ...              </row>         </grid>     ) } 

onaddlibraryinputchange function looks this:

onaddlibraryinputchange(name, event) {     let inputfields = {}     inputfields[name] = event.target.value     let inputvalues = {}     this.setstate({inputvalues}) } 

i have been trying insert input fields' values array of objects - inputvalues object in setstate - has shape:

[{name: "sunnyvale", status: "available", distance: 7}, {name: "palo alto",    status: " not available", distance: 12},  ...] 

where sunnyvale , 7 value of input fields 1 , 3 respectively of array's index 0; palo alto , 12 value of input fields 1 , 3 respectively of array's index 1; ...

thank suggestion.

it seems me setting state empty object in handler

onaddlibraryinputchange(name, event) {      let inputfields = {}      inputfields[name] = event.target.value      let inputvalues = {} <-- input values empty object      this.setstate({inputvalues}) } 

why don't try set object directly state , use index?

it seems passing index handler try this:

onaddlibraryinputchange(event, index) {     const target = event.target;     const name = target.name;      this.setstate({      [index]:{       'name': name,       'status':'x',       'distance':'y'       }      }); }