The message responds to the message when you click a link

Question

The following code shows a warning message because the rules are bound in the .Map function. I do not want this to happen. Instead, how can I attach onClick to each link, so when the user clicks the link, the message will be displayed? I think this has to do with placing .bind (this) somewhere in the .Map code, but cannot figure it out. Thanks for any help!

const RuleResults = React.createClass({
showMessage: function(rule) {
    if (rule.ShowMessageToUser == true) {
        alert(rule.MessageToUser);
    }
},
render: function() {

                    var rules = this.props.businessRules.map((rule) => {
            return (
                <tr>
        <td>
        <a href={rule.HREF} onClick={this.showMessage(rule)} target='_blank'>{rule.Name}</a>
        </td>
        </tr>
            );
        })   ;
return (    
            <div>
            <table>
            <thead>
            <tr>
            <th>Name</th>
            </tr>
            </thead>
            <tbody>
            {rules}
            </tbody>
            </table>
                 </div>
        );

    }
});

Answer 1

You should pass onClicka function reference instead of a call. For this you can use .bindorarrow function

• <a href={rule.HREF} onClick={ this.showMessage.bind(this, rule) }>..</a>
• <a href={rule.HREF} onClick={ () => this.showMessage(rule) }>..</a>

Example