Cannot read property 'replace ' of undefined

Question

Here I'm trying to get the current path, but also have problem and says that Cannot read property 'replace' of undefined . Who could help me to resolve this problem ?

handleClick= (event: SyntheticMouseEvent<HTMLButtonElement>) => {
        const { workflowPath: _workflowPath } = this.props;

        let workflowPath = _workflowPath;

        Object.keys(this.props.row._original).forEach((key) => {
            workflowPath = workflowPath.replace(`{${key}`, this.props.row._original[key]);
        });

        this.props.startFlow(workflowPath);
        this.setState({ loading: true });
    };

Also this handleClick is in component which is called Cell .

Header: 'Status',
accessor: 'status',
label: 'Change status',
type: 'workflow',
workflowPath: 'process/task/change_status',
icon: <Launch />,
items: [
    {
        label: 'New',
    },
    {
        label: 'In progress',
    },
    {
        label: 'Rejected',
    },
    {
        label: 'Complete',
    },
],
Cell: WorkflowColumn,

Answer 1

I believe it should be:

workflowPath && workflowPath.length &&
  Object.keys(this.props.row._original).forEach((key) => {
  ...

This will check that workflowPath actually has something in it. If it's null this leads to the error you have been experiencing.