React - Events in same class with parameters

Question

I'm using Reactable to create a table. When clicked on the action box, I want a box with extra information about that row to appear by changing the style. This is my code so far:

var SelLines  = new Object();
var Home = React.createClass({

    handleClick: function(e) {
        console.log("##Clicked##");
    },  

    render: function() {    
        var tableRows = Data.map(function(tableRow) {
            console.log(tableRow);
            SelLines[tableRow.ID] = false;
            console.log(SelLines);
            if (SelLines[tableRow.ID]) {
                return (
                    <Tr>
                        <Td column="ID">{tableRow.ID}</Td>
                        <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td>
                        <Td className="cellSelected" column="ACTION"><a onClick={SelLines[tableRow.ID] = true;Home.handleClick}>{tableRow.ACTION}</a></Td>
                         //// = true;Home.h ## not working
                    </Tr>
                );
            } else {
                return (
                    <Tr>
                        <Td column="ID">{tableRow.ID}</Td>
                        <Td column="DESCRIPTION">{tableRow.DESCRIPTION}</Td>
                        <Td className="cellNotSelected" column="ACTION"><a onClick={Home.handleClick}>{tableRow.ACTION}</a></Td>
                    </Tr>
                );
            }
        });
        return (
            <div>
                <div>
                    <Table className="table" id="table">
                        <Thead>
                            <Th column="ID">
                                <strong className="ID-header">ID</strong>
                            </Th>
                            <Th column="DESCRIPTION">
                                <em className="DESCRIPTION-header">DESCRIPTION</em>
                            </Th>
                            <Th column="ACTION">
                                <em className="ACTION-header">ACTION</em>
                            </Th>
                       </Thead>
                       {tableRows}
                   </Table>
                </div>
            </div>
        );
    }
});

How can I pass a parameter to handleClick?

onClick={SelLines[tableRow.ID] = true;Home.handleClick} is the equivalent to {onClick: SelLines[tableRow.ID] = true;Home.handleClick}. That's simply invalid JavaScript. The {...} can only contains expressions. — Felix Kling
– Felix Kling, Commented Mar 31, 2016 at 16:05
Can you fix your formatting? Also, you are setting SelLines[tableRow.ID] = false in your map function so it will never get to your if true condition. — Aaron Beall
– Aaron Beall, Commented Mar 31, 2016 at 17:14
@PL I fixed your formatting for you. Next time please post well-formatted code. — Aaron Beall
– Aaron Beall, Commented Apr 1, 2016 at 16:13

Aaron Beall · Accepted Answer · 2016-04-01 16:19:20Z

1

You can use function.bind() to prepend arguments to be called with when the function is invoked.

<a onClick={this.handleClick.bind(this, tableRow.ID)}>{tableRow.ACTION}</a>

handleClick: function(tableRowId, e) {
    SelLines[tableRowId] = true;
    console.log("##Clicked##", tableRowId);
}

Since you are rendering inside a map() callback you also have to bind the callback:

var tableRows = Data.map(function(tableRow){
    // ...
}.bind(this));

Or if you use ES6 you can write arrow functions to avoid needing to bind:

var tableRows(Data.map((tableRow) => {
    // ...
});

And you can write an inline arrow function as your handler which calls through to another function with some arguments:

<a onClick={(e) => this.handleClick(tableRow.ID)}>{tableRow.ACTION}</a>

edited Apr 1, 2016 at 16:19

answered Mar 31, 2016 at 17:11

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

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

2 Comments

P L Over a year ago

That works when I call it in the return of home, but not in he return of tableRows - how can I bind it to the parent item?

Aaron Beall Over a year ago

I missed your map function because of how it's formatted. You need to either bind your map callback or use an arrow function.

Collectives™ on Stack Overflow

React - Events in same class with parameters

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related