How to call function within component property?

Question

When I try to call a method or set a state inside a property of a component in this case Sortablejs the method returns an undefined error.

<Sortable options={{ 
animation: 150,
                onAdd: function(/**Event*/ evt) {
                  this.testFunction();//this doesnt seem to work??
                },
                group: {
                  name: "clone2",
                  pull: true,
                  put: true
                }
              }}
              className="block-list A"          
              tag="ul"
            >
              {cloneControlledTarget}
            </Sortable>
              <Sortable
                options={{
                  animation: 150,
                  sort: false,
                  group: {
                    name: "clone2",
                    pull: "clone",
                    put: false
                  }
                }}
                className="block-list"
                tag="ul"
              >
                {cloneControlledSource}
              </Sortable>

Looks like an issue with the this keyword. You should read this : https://stackoverflow.com/a/17514482/7131746 — Guillaume Georges, Dec 12 '19 at 09:48

score 0 · Answer 1 · answered Dec 12 '19 at 10:08

I think issue is in the following code. Use arrow function instead of traditional anonymous function

onAdd: function(/**Event*/ evt) {
  this.testFunction();//this doesnt seem to work??
}

Use like this

onAdd: (/**Event*/ evt) => {
  this.testFunction();
}

This should work if testFunction is available in your component.

score 0 · Answer 2 · answered Dec 12 '19 at 10:09

You are passing an object

              { 
                animation: 150,
                onAdd: function(/**Event*/ evt) {
                  this.testFunction();
                },
                group: {
                  name: "clone2",
                  pull: true,
                  put: true
                }
              }

to the options attribute. So inside the function onAdd the value of "this" refers to the object properties. Since there is no testFunction inside the object, it will throw a reference error. Use arrow function instead.

onAdd: () => { this.testFunction() }

How to call function within component property?

2 Answers2