Using setState with function in haxe-react

1

Hi, I’m trying to use setState with a function with the previous state. My code is this:

setState(function(prevState:AppState, props:Dynamic) {
    return { timeLeft: prevState.timeLeft - 1 };
});

this is my state:

typedef AppState = {
 	timeToGo:DateTime,
    timeLeft:Int,
    timeLeftColor:String,
    btStartText:String,
    statusBar:String
}

but I’m receiving this error:

src/view/App.hx:118: lines 118-120 : prevState : view.AppState → props : Dynamic → { timeLeft : Int } should be haxe.extern.EitherType<view.AppState → { ?timeToGo : Null<datetime.DateTime>, ?timeLeftColor : Null, ?timeLeft : Null, ?statusBar : Null, ?btStartText : Null }, haxe.extern.EitherType<view.AppState → Dynamic → { ?timeToGo : Null<datetime.DateTime>, ?timeLeftColor : Null, ?timeLeft : Null, ?statusBar : Null, ?btStartText : Null }, { ?timeToGo : Null<datetime.DateTime>, ?timeLeftColor : Null, ?timeLeft : Null,?statusBar : Null, ?btStartText : Null }>>
src/view/App.hx:118: lines 118-120 : For function argument ‘nextState’
/usr/share/haxe/std/haxe/macro/Context.hx:272: characters 9-46 : Invalid input value
/haxelib/react/1,3,0/src/lib/react/ReactMacro.hx:147: characters 11-36 : Called from
/haxelib/react/1,3,0/src/lib/react/ReactMacro.hx:91: characters 16-45 : Called from
/haxelib/react/1,3,0/src/lib/react/ReactMacro.hx:100: characters 47-71 : Called from
/haxelib/react/1,3,0/src/lib/react/ReactMacro.hx:62: characters 13-35 : Called from
/haxelib/react/1,3,0/src/lib/react/ReactMacro.hx:27: characters 10-54 : Called from
src/view/App.hx:166: lines 166-175 : Called from

My code seems to be inside the EitherType list (view.AppState → Dynamic → { ?timeToGo : Null<datetime.DateTime>, ?timeLeftColor : Null, ?timeLeft : Null, ?statusBar : Null, ?btStartText : Null }) but I not used to write code with EitherType so maybe I’m missing something.

2

Right, there is a unification issue or something.

You are returning only a partial state, which is totally allowed but not correctly recognized.

Solution is one of those options:

setState(function(prevState:AppState, props:Dynamic) {
    return cast { timeLeft: prevState.timeLeft - 1 }; // make it dynamic
});

setState(function(prevState:AppState, props:Dynamic): react.Partial<AppState> {
    return { timeLeft: prevState.timeLeft - 1 };
});
3

Thanks, I tested the option with react.Partial and it worked.