Error using rowDelegate

[blackrue]

Trying to use area, actualTempF,setTempF from my ListModel in the rowDelegate below ( see the three Text)
I tried modelData, model, just using area .... please tell me the syntax ... I am using 5.15

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Dialog {
title: "Temperature Settings"
width: 400
height: 300
ListModel {
id: tempModel
ListElement { area: "Living Room"; actualTempF: "70"; setTempF: "72" }
ListElement { area: "Bedroom"; actualTempF: "68"; setTempF: "70" }
ListElement { area: "Kitchen"; actualTempF: "72"; setTempF: "68" }
ListElement { area: "Bathroom"; actualTempF: "75"; setTempF: "74" }
}
TableView {
id: tableView
anchors.fill: parent
model:tempModel
rowDelegate: Rectangle {
height: 30
color: styleData.alternate ? "#f5f5f5" : "white"
Text {
anchors.left: parent.left
anchors.leftMargin: 10
text: area
}
Text {
anchors.left: parent.children[0].right
anchors.leftMargin: 10
text: styleData.value.actualTempF
}
Text {
anchors.left: parent.children[1].right
anchors.leftMargin: 10
text: modelData.setTempF
}
}

    TableViewColumn {
        role: "area"
        title: "Area"
        width: tableView.width / 3
    }

    TableViewColumn {
        role: "actualTempF"
        title: "Actual Temperature (F)"
        width: tableView.width / 3
    }

    TableViewColumn {
        role: "setTempF"
        title: "Set Temperature (F)"
        width: tableView.width / 3
    }


}

}

[blackrue]

In case anyone else wanted to know how to do this properly. I found the answer.
You should use itemDelegate and styledata.value .. see below

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Dialog {
title: "Temperature Settings"
width: 500
height: 300
ListModel {
id: tempModel
ListElement { area: "Living Room"; actualTempF: "70"; setTempF: "72" }
ListElement { area: "Bedroom"; actualTempF: "68"; setTempF: "70" }
ListElement { area: "Kitchen"; actualTempF: "72"; setTempF: "68" }
ListElement { area: "Bathroom"; actualTempF: "75"; setTempF: "74" }
}
TableView {
id: tableView
anchors.fill: parent
model:tempModel
itemDelegate: Rectangle {
height: 30
color: styleData.alternate ? "#f5f5f5" : "white"
Text {
anchors.left: parent.left
anchors.leftMargin: 10
//text: tableView.model.get(styleData.row).area
text: styleData.value

        }

// Text {
// anchors.left: parent.children[0].right
// anchors.leftMargin: 10
// text: tableView.model.get(styleData.row).actualTempF
// }
// Text {
// anchors.left: parent.children[1].right
// anchors.leftMargin: 10
// // text: modelData.setTempF
// text: tableView.model.get(styleData.row).setTempF
// }
}

    TableViewColumn {
        role: "area"
        title: "Area"
        width: tableView.width / 3
    }

    TableViewColumn {
        role: "actualTempF"
        title: "Actual Temperature (F)"
        width: tableView.width / 3
    }

    TableViewColumn {
        role: "setTempF"
        title: "Set Temperature (F)"
        width: tableView.width / 3
    }


}

}