javascript - lists are not clickable in reactjs -
i have list of destination name should clickable , show result lists not clickable .i have tried writing console.log in click event function nothing traced in console too.
destination-list
var react = require('react/addons'); var destination = require('./destination.js.jsx'); var destinationslist = react.createclass({ mixins: [ react.addons.purerendermixin ], ondestinationclick: function(destination) { console.log('destination clicked'); console.log(destination); this.props.ondestinationclick(destination); }, renderdestinations: function() { var _self = this; var selecteddestination = _self.props.selecteddestination; return this.props.destinations.map(function(destination, idx) { var name = destination.name; var slug = destination.slug; var image = destination.image; return <destination destination={destination} selecteddestination={selecteddestination} ondestinationclick={_self.ondestinationclick} key={'destination-' + slug}/> }); }, render: function() { return ( <div classname='destinations-list'> <div classname='destinations-list-inner'> {this.renderdestinations()} </div> </div> ); } }); module.exports = destinationslist;
destination
var destination = react.createclass({ mixins: [ react.addons.purerendermixin ], ondestinationnameclick: function(event) { console.log('event triggered',event); this.props.ondestinationclick(this.props.destination); }, render: function() { var classes = this.props.selecteddestination === this.props.destination.slug ? 'destination selected' : 'destination'; return ( <div classname={classes}> <div classname='destination-inner'> <div classname='destination-name' onclick={this.ondestinationnameclick}>{this.props.destination.name}</div> // not clickable </div> </div> ); } }) module.exports = destination;
Comments
Post a Comment