CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
jammy
jammy

Reputation: 977

unexpected use of event when i pass another thing with it in parameter

Here is the event onClick thing that i have at one place .

<Button onClick={onClickAddTopics(e,dataid)}  variant="fab" mini color="primary" aria-label="Add" className={classes.button}>
                        <AddIcon />
 </Button>

and i am using that onClick evet handler at another place and here is the code .

addTopicEvent =(e,dataid)=>{
            e.stopPropagation();
            this.props.addEditTopicShow('add',{});
            this.chapterId=dataid;
            console.log('this.chapterId is',this.chapterId);

        }

but i am getting an error which says unexpected use of event .Is it wrong to pass events in parameter this way or is it wrong to pass events along with another paramter .I need the id of the clicked thing everytime .

Upvotes: 2

Views: 228

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281894

The event being used inside the function is not the object that onClick passes back. Also onClick expects a function and hence you should not call the function directly unless it returns back a function which onClick will execute.

The solution for your case can use curried function like

 addTopicEvent =(dataid)=>(e) => {
        e.stopPropagation();
        this.props.addEditTopicShow('add',{});
        this.chapterId=dataid;
        console.log('this.chapterId is',this.chapterId);

 }

 <Button onClick={addTopicEvent(dataid)}  variant="fab" mini color="primary" aria-label="Add" className={classes.button}>
                    <AddIcon />
 </Button>

or simply using arrow function like

 addTopicEvent =(e,dataid)=>{
        e.stopPropagation();
        this.props.addEditTopicShow('add',{});
        this.chapterId=dataid;
        console.log('this.chapterId is',this.chapterId);

 }

<Button onClick={(e) => addTopicEvent(e, dataid)}  variant="fab" mini color="primary" aria-label="Add" className={classes.button}>
        <AddIcon />
 </Button>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075119

onClick={onClickAddTopics(e,dataid)} calls onClickAddTopics and uses its return value as the value of the onClick, exactly the way x = bar() calls bar and assigns its return value to x.

Pass in a function rather than calling a function (in this case, I'm using an arrow function):

<Button onClick={(e) => onClickAddTopics(e, dataid)} ...>

Upvotes: 0

jsDevia
jsDevia

Reputation: 1292

You sould pass event to function :

<Button onClick={(event)=>onClickAddTopics(event,dataid)}  variant="fab" mini color="primary" aria-label="Add" className={classes.button}>
                        <AddIcon />
 </Button>

Upvotes: 1

Related Questions