Trouble while changing color of rectangle in a Component

[DavidM29]

Hello,
I'm new to QML and I'm trying to make a component wich is a Rectangle with 3 others smaller rectangles it look like that :
For this component I have named the three rectangles rect1, rect2, rect3. I would like to change the rectX color depending on a value I give.
For example when I send 2 I change the color of rect2 to red.

From here I have a ui.qml and a .qml file I supposed this is normal.
I supposed that the ui.qml is dedicated to UI only so I'm trying to make this function in the .qml file.

  signal changingState(int state)

    onChangingState: handlerChangingState(state)

    function handlerChangingState(state){
        switch(state){
        case 0:
            rect1.color: "grey";
            rect2.color: "grey";
            rect3.color: "grey";
            break;
        case 1:
            rect1.color: "red";
            rect2.color: "grey";
            rect3.color: "grey";
            break;
        case 2:
            rect1.color: "grey";
            rect2.color: "red";
            rect3.color: "grey";
            break;
        case 3:
            rect1.color: "grey";
            rect2.color: "grey";
            rect3.color: "red";
            break;
        }
    }

But here my problem is that when I write rect1.color: "grey" I have this error :

Expression statements should be assignments, calls or delete expressions only

I don't really understand what is wrong with this code. Can you please help me. Maybe I'm totally wrong to make this kind of function in the .qml file please correct me If I am.

Thank you

[ODБOï]

@DavidM29 hello,

In your handlerChangingState function you are using QML syntax :
rect1.color : "grey"; // QML

use js syntax :
rect1.color = "grey"; // js

and see if this is simpler solution for you :

import QtQuick 2.0

Rectangle {

    property int active : 0 

    Row{
        anchors.bottom: parent.bottom
            height: parent.height/3
            width:parent.width*0.8
            anchors.horizontalCenter: parent.horizontalCenter

            spacing: (width - (3*30)) / 2
        Rectangle{
            width: 30
            height: parent.height
            color: active===1 ? "red" : "gray"
        }
        Rectangle{
            width: 30
            height: parent.height
            color: active===2 ? "red" : "gray"
        }
        Rectangle{
            width: 30
            height: parent.height
            color: active===3 ? "red" : "gray"
        }
    }

}

[DavidM29]

Thank you, it was simple...
I take a look at your code