0

I have dynamically generated textfield in Reactjs. The input textfield treated as separate component. When i try to set value in dynamically generated textfield, I get only last input value. All other input values are over write. We can use SWITCH case but if we add more input field,then code become very large.

Here my sample code:

var TextBox = React.createClass({
  setTextState : function(event){ 
    idval = event.target.id;
    console.log(idval);
    this.setState({idval  : event.target.value}); //Here the issue
  },

  content: function() {

    name1 = "task_1";
    name2 = "task_2";
    name3 = "task_3";
    name4 = "task_4";
    name5 = "task_5";
    name6 = "task_6";
    name7 = "task_7";

    return [
      <td> <TextInput type="text" /></td>, <td> <TextInput type="text" name={name1} id={name1} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name2} id={name2} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name3} id={name3} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name4} id={name4} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name5} id={name5} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name6} id={name6} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name7} id={name7} setText={this.setTextState}/></td>
    ]
  },

  submitValue : function() {

  },

  render: function() {
    return (<tr>{this.content()}<td><input type="button" onClick={this.submitValue}/></td></tr>);
  }
});
jagadeesh puthukkudi
  • 93
  • 1
  • 1
  • 8
  • "All other input values are over write" -- I think you need to clarify what's happening, because this isn't clear to me. – starwed Apr 03 '15 at 15:14
  • Here Input Text field name is task_1,task_2 etc. When i enter values in textfield and trying to fetch all these values i get only last inserted values . – jagadeesh puthukkudi Apr 03 '15 at 15:21

2 Answers2

1

Unless you're trying to set a state variable named idval, this is not correct:

this.setState({idval  : event.target.value}); //Here the issue

That is to say, JavaScript does not use the value of the variable idval as the key for the object; it uses the string literal "idval". See this code for an example:

var val = "testing";
var a = { val: 1 };
document.write("a.testing: " + a[val]);
document.write("<br>");
document.write("a.val: " + a["val"]);

It seems more likely, based on your setup, that you're trying to set a state variable named task_1, task_2, etc. To do so, you'd want something more like this:

setTextState : function(event){ 
  idval = event.target.id;
  console.log(idval);
  var stateUpdate = {};
  stateUpdate[idval] = event.target.value;
  this.setState(stateUpdate);
},
Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
0

If the "idval" variable has the correct value, then the setState() call should work as you expect. You can try to copy the currentState and append to it and see if it works. If it doesn't work, please post the full code.

setTextState : function(event){ 
    idval = event.target.id;
    console.log(idval);
    newState = this.state;
    newState.idval = event.target.value;
    this.setState(newState); 
},
Cristik
  • 30,989
  • 25
  • 91
  • 127