no changes in state

[jorda0mega]

Tweening not working for me. Something as simple as this has no effect on the state of my component. Any suggestions?

var Start = React.createClass({
    getInitialState: function(){
        return {width: "50px"};
    },
    handleClick: function(){
        this.props.startTimer();
        TweenLite.to(this, 1, {state: {width: "100px"}});
        // this.setState({width:"50px"});
    },
    render: function(){
        return (
            <RaisedButton label="Start" onClick={this.handleClick} style={{width: this.state.width}} />
            );
    }
});

[lettertwo]

Hi @jorda0mega, I think i see what the problem is–the plugin doesn't understand the string "100px".

You should get the behavior you're looking for if you use a number value instead, and then build your style string in your render function:

var Start = React.createClass({
    getInitialState: function(){
        return {width: 50};  // Use a number instead of a string here
    },
    handleClick: function(){
        this.props.startTimer();
        TweenLite.to(this, 1, {state: {width: 100}});  // Tween that number here
        // this.setState({width:50});
    },
    render: function(){
        return (
            <RaisedButton label="Start" onClick={this.handleClick} style={{width: this.state.width + 'px' /* Make your style string at the last moment here */ }} />
            );
    }
});

Hope that helps! I'm going to close this issue, but feel free to continue with the thread if you continue to have problems with the plugin.

EDIT: It dawned on me that you don't actually have to create the style string (with 'px') at all–React will assume a pixel unit for a width style value: http://facebook.github.io/react/tips/style-props-value-px.html

[jorda0mega]

thanks, that worked.