I am trying to make a custom Alert component:
type Severity = "error" | "success" | "info" | "warning" | undefined;
export default function CustomAlert(severity: Severity, text: string){
return(
<Alert style={{width:'50%'}} severity={severity}> {text}</Alert>)
}
but I am unable to use it in my main page's function:
function StatusMessage(){
if (errorMessage.includes(`Couldn't find user`)){
return (
<div>
<CustomAlert severity='error' text='User Not Found'></CustomAlert>
</div>
)
}
The custom alert gives me this error:
Type '{ severity: string; text: string; }' is not assignable to type '(IntrinsicAttributes & "success") | (IntrinsicAttributes & "info") | (IntrinsicAttributes & "warning") | (IntrinsicAttributes & "error")'.
Type '{ severity: string; text: string; }' is not assignable to type '"error"'.ts(2322)
Functional components receive one parameter: props
. You can use the whole object or destructure it, but you can't pass more than one.
function CustomAlert({severity: Severity, text: string})
function CustomAlert(props: {severity: Severity, text: string})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.