How to fix the forbidden non-null assertion in typescript and react?-CodePudding

i have code like below

type ItemProps = {
    status?: string;
}

<Items status={status!} /> //error here warning  Forbidden non-null assertion              @typescript-eslint/no-non-null-

assertion

i am getting error about forbidden non-null assertion.

how can i fix this. could someone help me fix this.

i have tried

<Items status={status && status}/>

but this doesnt seem to be right. could someone help me with this. thanks.

CodePudding user response：

Why do you want to use the "non-null assertion operator"?

The status property can either be string | undefined. What about passing an empty string or perhaps assigning a default value when you don't want to specify a value for status?

<Items status={status || ''}/>

Or:

type ItemProps = {
  status?: string;
};

const Items: React.FC<ItemProps> = ({ status = 'statusDefaultValue' }) => <div>Some JSX</div>

It's a bit hard for me to understand your case without knowing the context. Hope this can help.