CODEWITHSUNDEEP
reactjstypescript
egorchik
egorchik

Reputation: 549

Cannot invoke an object which is possibly 'undefined' on onClick

interface Alertprops {
    showAlert?: showAlertType,
    HideAlert?: () => void,
    onClick?: () => void,

}

interface Alertstate {
    alertMess?: string,
    showAlert?: boolean,
    alertType?: string,
    showReload?: boolean,
    

}

class Alert extends Component<Alertprops,Alertstate> {
    constructor(props:Alertprops) {
        super(props)

        this.state = {
            alertMess:'',
        }
    }

alertBox() {
        return (
            <div className="inner-box">
                {this.state.alertMess}
                <br/>
                {this.state.showReload ? (<a className="reload-link" onClick={()=>{window.location.reload()}}>Reload page</a>):(null)}
                <a onClick={()=>{this.props.HideAlert()}} className="close-alert">X</a>
            </div>
        )
    }

on onClick={()=>{this.props.HideAlert()}} I get error "Cannot invoke an object which is possibly 'undefined'" what Im doing wrong? just started use TS.

Upvotes: 0

Views: 327

Answers (1)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

hi if you pass function as props that can be undefined you can pass it like this

this.props.HideAlert?.()

this can just run only if you get it as props

Upvotes: 3

Related Questions