I have data that returning from BE
Here is code where I show it
<div className="pr-0 mt-20" style={{ display: 'flex', justifyContent: 'center' }}>
<MuiCardWithAnimation component={AnimateSimple} recipe="slideRightInLarge" className="w-6/12 mx-auto m-16 md:m-0" square>
<CardContent className="flex flex-col items-center justify-center p-32 md:p-48 md:pt-128 ">
<Typography variant="h6" className="md:w-full mb-32">
Result
</Typography>
{companiesHouseResults?.filter(r => Math.max(r.matchConfidenceScore)).map((r) => (
<div className="col col-lg-4 grid-wrapper">
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography variant="h5" component="div">
Company Name: {r.companyName}
</Typography>
<Typography sx={{ mb: 1.5 }}>Confidence Band: {r.matchConfidenceBand}</Typography>
<Typography variant="body2">Confidence Score: {r.matchConfidenceScore}</Typography>
</CardContent>
</Card>
</div>
))}
</CardContent>
</MuiCardWithAnimation>
</div>
Here {companiesHouseResults?.filter(r => Math.max(r.matchConfidenceScore)).map((r) I need to filter it to get element with highest score
But at Math.max I got this error
Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.
How I can solve this?
You need to check if it is undefined before passing it to Math.max function, you can do it for example like this
r.matchConfidenceScore && Math.max(r.matchConfidenceScore)
Value of r.matchConfidenceScore will be cast to boolean, and if it is false it will not execute the next statement because of the logical AND (&&)