CODEWITHSUNDEEP
reactjstypescript
Sukich
Sukich

Reputation: 159

I get error of TypeError: Cannot read property 'content' of undefined in React

I was creating React project and wanted to add class to div like so: 

<div className={classes.content}>
                    In the case of deleting the Data Source, you will lose all configuration
                    settings for it. Are you sure you want to delete Data Source?
                    </div>

but is shows that content is undefined thus I really need your help. Here is the whole code:

import React from 'react';

import { ModalDialog, StyleRules, WithStyles } from '@perf/ui-components';
import { Delete18 } from '@perf/ui-components/dist/icons/uui/action/Delete18';

import { ActionButton } from './ActionButton';
import { createModalActions } from './createModalActions';

const styles: StyleRules = {
    content:{
        fontSize:14,
        lineHeight:'24px',
    }
};
interface Props extends WithStyles<typeof styles> {
    onClick(): void;
}

const Actions = createModalActions({
    actionText: 'Delete',
    actionType: 'danger',
});

export class DeleteButton extends React.PureComponent<Props> {
    state = {
        isWarningModalShown: false,
    };

    render() {
        const { isWarningModalShown } = this.state;
        const {classes} = this.props;
        return (
            <>
                <ModalDialog
                    isShow={isWarningModalShown}
                    config={{
                        title: 'Delete data source',
                        handleCancel: this.handleDeleteClick,
                        handleConfirm: this.handleConfirm,
                        CustomDialogActions: Actions,
                    }}
                >
                    <div className={classes.content}>
                    In the case of deleting the Data Source, you will lose all configuration
                    settings for it. Are you sure you want to delete Data Source?
                    </div>
                </ModalDialog>
                <ActionButton
                    description="Delete data source"
                    Icon={Delete18}
                    onClick={this.handleDeleteClick}
                />
            </>
        );
    }

    private handleConfirm = () => {
        const { onClick } = this.props;

        this.handleDeleteClick();
        onClick();
    };

    private handleDeleteClick = () => {
        this.setState({
            isWarningModalShown: !this.state.isWarningModalShown,
        });
    };
}

If something is not clear please let me know

Upvotes: 0

Views: 259

Answers (2)

Jithil P Ponnan
Jithil P Ponnan

Reputation: 1247

You are not initializing the classes. You could avoid it by initialize it in the declaration level. so:

const {classes} = this.props || {}; //This will initialize the classes in case the this.props is empty

Upvotes: 0

Andrey Bodoev
Andrey Bodoev

Reputation: 4541

Error shows that you haven't pass classes prop to component. Example are,

<DeleteButton classes={styles} />

Upvotes: 1

Related Questions