DIV onClick Pass Array to Function in ReactJS

Question

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;

 }

isherwood · Accepted Answer · 2019-04-24 18:23:51Z

1

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)}

edited Apr 24, 2019 at 18:23

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Apr 24, 2019 at 18:21

Maxi Diaz

2921 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marwane Boudriga · Accepted Answer · 2019-04-24 18:26:55Z

0

An alternative way to calling with an arrow function

onClick={() => function()}

is to define it as an arrow function

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

answered Apr 24, 2019 at 18:26

Marwane Boudriga

1911 silver badge12 bronze badges

Collectives™ on Stack Overflow

DIV onClick Pass Array to Function in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related