Antd how to use a kind of onLoad or componentDidMount function?

Question

I am working with AntDesign and want to use a onLoad or a componentDidMount function. Both don't work.

How can I make a function with the same purpose?

//Things I have tried and didn't work for me. (I might be doing things wrong.)

return (
        <div onLoad={() => {console.log('Toeter!')}}>
            //Blah blah
        </div>
    )

window.onload = () => {
//Blah blah
}

componentDidMount = () => {
//Blah blah
}

What I want to do is trigger a function when the components comes on screen. The funtion is supposed to find a product in an array of objects.

EDIT: A complete component as asked in the comments

import * as React from "react";
import {Row, Col, Image, Card, Space, Breadcrumb, Descriptions, InputNumber, Button} from 'antd';

import * as FreddieGras from "../images/freddieGras.jpg";
import "react-multi-carousel/lib/styles.css";
import {RouterProps} from "./router.props";
import {Link} from "@reach/router"

interface ProductDetailProps extends RouterProps {
    id?: string;
}


export default function ProductDetail(props: ProductDetailProps) {
    // Different kinds of grass
    let grassKinds = [
        {
            name: 'Kate',
            id: 1,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Fred',
            id: 2,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: false,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Gideon',
            id: 3,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Isa',
            id: 4,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
    ];

    let product = {};
    window.onload = () => {
        product = grassKinds.find(x => x.id);
        console.log('Toeter!');
    }

    return (
        <div onLoad={() => {
            console.log('Toeter!')
        }}>


            <Breadcrumb>
                <Breadcrumb.Item>
                    <Link to="/">Home</Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>

                </Breadcrumb.Item>
            </Breadcrumb>

            <Row>
                <Col span={10} justify={'space-around'} align={'center'}>
                    <Image
                        src={FreddieGras}
                    />
                </Col>

                <Col span={14}>
                    <Descriptions title="User Info" style={{width: '50%'}}>
                        <Descriptions.Item label="Naam">Kate</Descriptions.Item>
                        <Descriptions.Item label="Zachtheid">7/10</Descriptions.Item>
                        <Descriptions.Item label="Echtheid">6/10</Descriptions.Item>
                        <Descriptions.Item label="Prijs /m2">€17,95</Descriptions.Item>
                    </Descriptions>

                    <Card title="Bereken oppervlakte" style={{margin: '5px'}}>
                        <label>Lengte (m)</label>
                        <InputNumber
                            defaultValue={1000}
                            formatter={value => `€ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            onChange={() => {
                                console.log('Number')
                            }}
                        />

                        <div>
                            <p><b>Omtrek </b> 10 M</p>
                            <p><b>Oppervlakte </b> 2,5 M2</p>
                        </div>
                    </Card>

                    <Card title="Totaalprijs" style={{margin: '5px'}}>
                        <b>€ 17,95</b>
                        <Button onClick={() => {
                            console.log('In winkelwagen')
                        }}>In winkelwagen</Button>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

Answer 1

React components don't use window.onload and componentDidMount is reserved for and valid only in class-based components. Functional components can use an useEffect React hook with empty dependency array to have the equivalent to componentDidMount lifecycle method.

let product = {};

useEffect(() => {
  product = grassKinds.find(x => x.id);
  console.log('Toeter!');
}, []);