how to pass props to a function from a button in reactjs

Question

I want to use an event handler to redirect a user to another route in reactJS but I have not figured out how i can pass down it's props to the event handler function.

<button onClick={ChallengeActions.OpenChallenge(item.title) }>Start<button>

This is what my event listener looks like

onOpenChallenge: function(url) {

    window.location.href = url;
}

The problem is that the function automatically fires up whenever i load the page instead of waiting for the event handler, I also get the following error.

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

possible duplicate of React click handlers and binding this

WiredPrairie
– WiredPrairie

2015-04-03 12:02:39 +00:00
Commented Apr 3, 2015 at 12:02 — WiredPrairie
– WiredPrairie, Commented Apr 3, 2015 at 12:02

Cristik · Accepted Answer · 2015-04-14 18:07:22Z

1

You need to take care of the following:

event handlers need to be mapped to a function:

<button onClick={this.onChallengeButtonClicked}>Start</button>

You need to tell each button to which item it corresponds to:

<button item={item} onClick={this.onChallengeButtonClicked}>Start</button>

Event handler function can detect which button item was clicked by accessing the event parameter:

onChallengeButtonClicked: function(event) {
    item = event.currentTarget.item;
    window.location.href = item.title;
}

edited Apr 14, 2015 at 18:07

answered Apr 3, 2015 at 13:54

Cristik

33.2k26 gold badges106 silver badges143 bronze badges

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

Comments

Chris Hawkes · Accepted Answer · 2015-04-03 11:55:13Z

0

var ChildComponent = React.createClass({
    render: function () {
        var myCustomValue = "testing this out";
        return (
            <h1 onClick={this.props.customEvent.bind(this, myCustomValue)}>Testing child click function</h1>
        )
    }
});

var ParentComponent = React.createClass({
    customEvent: function (value) {
        // do something wtih value
        alert("you passed " + value);
    },
    render: function () {
        return (
            <ChildComponent customEvent={this.customEvent} />  
        )
    }
});

React.render(
    <ParentComponent customEvent={this.customEvent} />,
    document.getElementById('example')
)

edited Apr 3, 2015 at 11:55

answered Apr 3, 2015 at 11:34

Chris Hawkes

12.5k6 gold badges60 silver badges69 bronze badges

3 Comments

Bazinga777 Over a year ago

I understand this way, but suppose i want to pass a value to the the event how would i do it ?

Chris Hawkes Over a year ago

i updated my answer with a full example of how you can pass values from a child to the parent during an event.

Bazinga777 Over a year ago

Thanks, I actually decided to use a Link instead but I am gonna need this as well. Will test and comment how it goes

Collectives™ on Stack Overflow

how to pass props to a function from a button in reactjs

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related