CODEWITHSUNDEEP
javascriptreactjs
letsCode
letsCode

Reputation: 3046

DIV onClick Pass Array to Function in ReactJS

I am getting the following error

Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of object type.

when I try to pass a value (which is an array) to a function when clicking a div. If this can not be done, what would be the best way to handle this? 

itemsArray(arr) {
        let items = [];
        let self = this;
        const grouped = this.groupBy(arr, item => item.source);
        grouped.forEach(function(value, key) {

            switch(key.toString().toLowerCase()) {
            case "occ_al": return items.push(<div onClick={self.listAllActivities(value)} className="recentActivityChannels"><img src={occ} width="15" /></div>)
          }

        })
        items.push(<div className="clearFloat"></div>);
        return items;
    }

    listAllActivities(arr){
        let items = [];
        var self = this;
        const grouped = this.groupBy(arr, date => getDateServiceTab(date.date));
        grouped.forEach(function(value, key) {
            value.map((map) => {

                //removed as its not important

        return items;

 }

Upvotes: 1

Views: 45

Answers (2)

Marwane Boudriga
Marwane Boudriga

Reputation: 191

An alternative way to calling with an arrow function 

onClick={() => function()}

is to define it as an arrow function

itemsArray = (arr) => {
      ...
}

Upvotes: 0

Maxi Diaz
Maxi Diaz

Reputation: 292

You are executing the function listAllActivities, and then the function returns an object. You could use an arrow function to solve this like this:

onClick={() => self.listAllActivities(value)}

Upvotes: 1

Related Questions