Note: before marking as duplicate, make sure that linked solution (if any, I failed to find one) has the same prop notion as in code below.

I have done some research about setting default prop values for React components, but it seems like I’m defining them in a slightly different way than most of examples and I’m struggling to use the Javascript-default-object-property-value notion.

My current component looks like this:

import { Button, Modal } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { ReactNode } from 'react';

function DialogOk(props: { 
    children: ReactNode, 
    show: boolean, 
    setShow: (newShow: boolean) => void, 
    header: string, 
    onOk: (() => void) | undefined }) {

    const [t] = useTranslation();

    function onHide() {

        props.setShow(false);
    }

    function onOk() {

        props.setShow(false);
        if (props.onOk !== undefined)
            props.onOk();
    }

    return (
        <Modal show={props.show} onHide={onHide} centered>
            <Modal.Header>
                <Modal.Title>{props.header}</Modal.Title>
            </Modal.Header>

            <Modal.Body>{props.children}</Modal.Body>

            <Modal.Footer>
                <Button variant="primary" onClick={onOk}>{t("common:ok")}</Button>
            </Modal.Footer>
        </Modal>
    );
}

DialogOk.defaultProps = {

    onOk: undefined
};

export { DialogOk }

When I try to modify the line with prop definitions (added line breaks for clarity):

function DialogOk(props: { 
    children: ReactNode, 
    show: boolean, 
    setShow: (newShow: boolean) => void, 
    header: string, 
    onOk: (() => void) | undefined = undefined }) {

I’m receiving the following error: A type literal property cannot have an initializer.

How should I set default value of props in this specific case?