React.js State Variable not updating on hover

I am using a state variable to track whether an icon has been hovered over. The variable is not updating. Console.log of the state variable is not working either (it doesn't show in console)

Icons = React.createClass({

    getInitialState: function() {
        return { icon_id: 0};
        console.log(icon_id);
    },

    onHover: function(event) {
        this.setState({ icon_id: event.currentTarget.dataset.id });
        console.log(icon_id);
    },

    render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="someclass">{ iconslist.map(function(i){
                            return <li key={i.id}><a href={i.url} target="_blank"><span className={i.class} id={i.id} data-id={i.data} onMouseOver={this.onHover}></span></a></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

    }

});

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var iconslist = [

    { data: '0', url: 'mailto:******', id: 'lightbulb', class: 'fa fa-lightbulb-o fa-5x', name: 'Thoughts'},
    { data: '1', url: 'mailto:******', id: 'gears', class: 'fa fa-gears fa-5x', name: 'ML'},
];

You should access any state variable as follows:

var iconid = this.state.icon_id;
console.log(iconid);

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image