React.js State Variable not updating on hover

Question

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'},
];

Answer 1

You should access any state variable as follows:

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

Answer 2

The setState method does not immediately update the state of the class. So the setState method also take a callback which is invoked after react has updated the state - official documentation

So in your code, you'd have to do something like this:

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

Answer 3

You need to a little change your code. You have to bind this method because this doesn't know about that method. Take a look what I changed.

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

    onHover = (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>

        );

That should works, if You use arrow function You don't need to bind function.

Answer 4

None of these answers were correct. I figured it out.

Instead of using the "function" term inside the render function, I had to use:

<ul className="icons">{ iconslist.map((i) => {
                            return (
                            <li key={i.id}>
                                <span className={i.class} 
                                    id={i.id} 
                                    data-id={i.data} 
                                    onMouseOver={this.onHover}>
                                </span>
                            </li>
                            )
                        }) }

                    </ul>

Using (i) => in the map function is what did it.

No soup for anyone else in this thread.