1

I am using SPFx to create web part. I am generating checkboxes dynamically with map function. below is render method code

public render(): React.ReactElement<IQuickSurveyProps> {
let styles: ICheckboxStyles = {
  root: {
    marginTop: '10px'
  }
};
let choicesArray: string[] = [];
let controlType: string = "";
return (
  <div className="">
    <div className="">
      {this.state.isError && <div><h3>Please give proper list name</h3></div>}
      {!this.state.isError &&
        <div>
          {
            this.state.listData.map(function (e, i) {
              if (e.Question_x0020_Type == "Choice") {
                controlType = "Radio";
              }
              else if (e.Question_x0020_Type == "Checkbox") {
                controlType = "Checkbox";
              }
              if (e.Options.indexOf(";") > 0) {
                choicesArray = e.Options.split(";");
              }
              else if (e.Options.indexOf("\n") > 0) {
                choicesArray = e.Options.split("\n");
              }
              return (
                <div>
                  {e.Title}
                  {
                    (choicesArray).map(function (item, key) {
                      return (
                        <div>
                          {(item.length != 0) ?
                            (<div><input type={controlType} 
                              name="chkbox"                                                              
                            value={item} /> 
                            <span>{item}</span></div>) : ""

                          }

                        </div>
                      )
                    })

                  }

                </div>
              )
            })

          }

          <div><button id="AlertMe" type="submit" onClick={this.submitDataToSP} >AlertMe</button></div>
        </div>
      }
    </div>
  </div>
)

}

Now i want to attach click event for the the checkboxes which are generating inside map function. How I can do that? If i give like

<input type={controlType} name="chkbox" 
value={item} onClick={this.checkBoxClicked} />

is giving error as checkBoxClicked is undefined even though i have defined that method. But if I try to render any checkbox out of the map function and if i try to attach an event it is working fine similar to a button AlertMe

4
  • how about using <input type={controlType} name="chkbox" value={item} onClick={this.checkBoxClicked.bind(this, key)} /> ? Commented Nov 30, 2017 at 12:33
  • I have tried this as well. Not working. Commented Nov 30, 2017 at 12:53
  • 1
    .bind(this) would have to be chained to the function definition; that's ES5 coding. In ES6 you can use arrow functions (as Waldek answers) this does the scope binding for you. Commented Dec 8, 2017 at 15:32
  • 1
    Good tutorial on everything this : 2ality.com/2017/12/alternate-this.html Commented Dec 8, 2017 at 19:19

1 Answer 1

1

In your map function, you're using function(item,key) which creates its own scope and makes this refer to the function rather than the component. You should be able to solve the issue by changing it to (item, key) => which will retain the parent scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.