Odoo / owl.js pass properties to parent component in a loop

Question

This is a beginner question, but can't figure out where mistake is, likely syntax.

I try to render array of objects and pass props to child component. The child components are being rendered on the page, but this.props.element in child component is null

So, parent component template is service_table_view.xml

<t t-foreach="state.elements" t-as='el'>
     <TableElement element="el" />
</t>

service_table_view.js

import {TableElement} from "../service_table_element/service_table_element";

const {Component} = owl;
const {useState} = owl.hooks;

export class TableView extends Component {

    /**
     * @override
     */
    setup() {
        super.setup();

        const elements = [
           
            {
                id: 1,
                type: 'lift',
                isBusy: false,
            },
            {
                id: 2,
                type: 'lift',
                isBusy: false,
            },
            {
                id: 3,
                type: 'alignment',
                isBusy: false,
            },
          
        ]
this.state = useState({elements})

    }


}

Object.assign(TableView, {
    template: 'service.TableView',
    components: {TableElement}
});

The child component service_table_element.js

export class TableElement extends Component {

    /**
     * @override
     */
    setup() {
        console.log('TABLE ELEMENT', this.props.element); <---- null
        super.setup();


        this.state = useState({
            showDialog: false,
            isBusy: false,
        });
    }
}
Object.assign(TableElement, {
    props: {
        element: {type: Array, element: Object}
    },
    template: 'service.TableElement',
});

Either in child template "service_table_element.xml" when I try to call <t t-esc="props.element.id"/> error is occured, because props.element is null

Answer 1

You should adjust the state assignment to correct this.

this.state = useState({elements: elements})
console.log('TABLE ELEMENT', this.props.elements);