How to change the color of the rectangle on each click of the mouse?

Question

QML

You need to change the color of the rectangle every time you click the mouse. A set of two to four colors. Here's my failed attempt:

import QtQml 2.3
import QtQml.Models 2.3
import QtQuick.Templates 2.2
import QtQuick 2.15
import QtQuick.Controls 2.15
import matrixfield 1.0

Rectangle {
    width: Constants.width
    height: Constants.height

    color: Constants.backgroundColor

    Grid {
        columns: 2;
        rows: 4;
        spacing: 2;
        Rectangle {
            color: "cyan";
            width: 15;
            height: 15;
            MouseArea {
                id: mouseArea1
                anchors.fill: parent
                onClicked: parent.color = 'red'

            }
            MouseArea {
                id: mouseArea2
                anchors.fill: parent
                onClicked: parent.color = 'cyan'

            }


        }
    }
}

Answer 1

Before you start writing code, try to understand why each element is needed separately, how it works, experiment with it, read the documentation. With such an approach as now, you will develop very slowly.
If the case, then you need a click counter and an array of colors, and there should be only one click area.
For the future, here is another good series of articles: https://habr.com/en/post/195706/