Eswaran Arumugam Eswaran Arumugam - 4 years ago 92
jQuery Question

How to set the different value to a property depending on user's input in reactJs

I have multiple input box with different names. While calling



import React, { Component } from 'react';
import cookie from 'react-cookie';
import Request from 'superagent';

export default class Performance extends Component {
constructor() {
super();
this.state = {
fullName : cookie.load('fullName'),
empId : cookie.load('empId'),
userResults : [{
"sectionTitle": "Customer Orientation",
"isMandatory": 0,
"question": [{
"qusId": 1,
"question": "Number of customer ",
"weightage": 15,
}]
}]
};

}
handleChange(event) {
this.setState({[event.target.name]: event.target.value});
}

render() {

return (
<div >

<div className="container ">
<form className="form-signin1">
{
this.state.userResults.map(function(res)
{
var questions = res.question.map(function(res1){
return (
<tr>
<td><input type="textbox" value="" name={'ques_check_box_1_1'} onChange={(e) =>{this.handleChange.bind(this)}}/></td>
<td><input type="textbox" value="" name={'ques_check_box_1_2'} onChange={(e) =>{this.handleChange.bind(this)}}/></td>
<td><input type="textbox" value="" name={'ques_check_box_1_3'} onChange={(e) =>{this.handleChange.bind(this)}}/></td>
</tr>
)
});
return (
<div className="row">
<table className="table text-center" >
<thead>
<th width="400">Deliverables</th>
<th>Justifications</th>
<th>Weightage</th>
<th className="lastHead">Employee <br />Weightage</th>
</thead>
<tbody>
{questions}
</tbody>
</table>
</div>
)
})
}
</form>
</div>
</div>
);
}
}





functions it through's error like "Uncaught TypeError: Cannot read property 'handleChange' of undefined at onChange". Please help me to solve.

Answer Source

You are using callback methods in map, so you have to maintain the context also by using .bind(this) with function, or you can use arrow functions, it will do this job for you, you don't have to worry about binding, Try this:

this.state.userResults.map((res, i)=>
{
    var questions = res.question.map((res1,j)=>{
        return (
                <tr key={j}>
                    <td><input type="textbox" value="" name={'ques_check_box_1_1'} onChange={this.handleChange.bind(this)}/></td>
                    <td><input type="textbox" value="" name={'ques_check_box_1_2'} onChange={this.handleChange.bind(this)}/>/></td>
                    <td><input type="textbox" value="" name={'ques_check_box_1_3'} onChange={this.handleChange.bind(this)}/>/></td>
                </tr>
            )
        });
    return (
        <div className="row" key={i}>        
            <table className="table text-center" >
                <thead>
                    <th width="400">Deliverables</th>
                    <th>Justifications</th>
                    <th>Weightage</th>
                    <th className="lastHead">Employee <br />Weightage</th>
                </thead>
                <tbody>
                    {questions}
                </tbody>
            </table> 
        </div>
    )
})

And in this part you are binding the event twice:

onChange={(e) =>{this.handleChange.bind(this)}}

either use it like this:

onChange={this.handleChange.bind(this)}

or

onChange={(e) =>{this.handleChange(e)}}

Suggestion: Assign unique key to each element, when creating the ui dynamically in loop.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download