How to bind functional React component to class events

Question

I'm trying to wrap my head around functional components and binding.

If I have a functional React component that looks like this:

const Dashboard = props => {
    const _dashboard = new _Dashboard()

    return (
        <div>
            <div className="title">Dashboard</div>
            <button>Log</button>
        </div>
    )
}

And a class that looks like this:

class _Dashboard {
    constructor() { }

    log() {
        console.log('Dashboard Log Clicked!')
    }
}

What is the proper way to bind the button click?

This is what I tried and doesn't work

const Dashboard = props => {
    const _dashboard = new _Dashboard()

    return (
        <div>
            <div className="title">Dashboard</div>
            <button onClick={ _dashboard.log }>Log</button>
        </div>
    )
}

but I feel like I'm missing something in the general way it works.

Edit: I removed the parenthesis from the log() call. Neither way is writing anything to the console.

could you check the value of your _dashboard in dev tools? (line: <button onClick={ _dashboard.log }>Log</button> ) — Sanda
– Sanda, Commented Mar 1, 2016 at 0:57
It doesn't even look like _dashboard is getting instantiated. adding console.log('test') to the _Dashboard class is never getting called — user924069
– user924069, Commented Mar 1, 2016 at 1:01
try this._dashboard? also the console.log('test'); should IMO be on the componentWillMount() or componentDidMount() of the class if you want to see it. Are you getting any console errors btw? — Sanda
– Sanda, Commented Mar 1, 2016 at 1:08
btw; try replacing your line: "<button onClick={ _dashboard.log }>Log</button>" with "<button onClick={ () => { console.log('test'); } }>Log</button>" . If that doesn't run, then your problem is a different one than binding the button onClick event correctly. — Sanda
– Sanda, Commented Mar 1, 2016 at 1:13
Ok, so looks like something else is going on, because <button onClick={ () => { console.log('test'); } }>Log</button> didn't do anything either. Back to the drawing board. Haha. The weirdest thing is there are no errors. Everything renders fine. — user924069
– user924069, Commented Mar 1, 2016 at 1:33

urfusion · Accepted Answer · 2016-03-01 05:48:12Z

1

you are calling the function aka _dashboard.log() instead of _dashboard.log ;

edited Mar 1, 2016 at 5:48

urfusion

5,4995 gold badges56 silver badges91 bronze badges

answered Mar 1, 2016 at 0:48

Sanda

1,49720 silver badges29 bronze badges

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

1 Comment

Sanda Over a year ago

& if you need to bind it to the button, you'd write ::_dashboard.log; or _dashboard.log.bind(this); (supposing for instance you need the value associated with that button).

Alejo Fernandez · Accepted Answer · 2016-03-01 00:48:12Z

0

You just need to remove the parenthesis otherwise you are actually invoking the function and binding onClick to the result of that function. Without parenthesis you pass a reference to the function.

<button onClick={_dashboard.log}>Log</button>

answered Mar 1, 2016 at 0:48

Alejo Fernandez

213 bronze badges

Comments

Patrick Klitzke · Accepted Answer · 2016-03-01 00:50:49Z

0

you have to write something like:

 <button onClick={_dashboard.log}>Log</button>

or

 <button onClick={() => _dashboard.log()}>Log</button>

otherwise your code will be executed immediatly and not bound.

answered Mar 1, 2016 at 0:50

Patrick Klitzke

1,5692 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to bind functional React component to class events

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related