Can someone help me with this problem? I want those internal links not to be opened in a new window tab. If I only have one item in the code it works fine, but as soon as i add another link i.e. 'governance' it throws me this error:
246:89 error Unexpected constant condition no-constant-condition
Here is the code:
export default function Menu(props) {
return (
<StyledMenu tabIndex={0}>
<StyledMenuTitle>
<span style={{ marginRight: '0.25rem' }}>{props.data.name} </span>
<MenuFlyout>
{props.data.sublinks.map((item, index) => {
return (
<StyledMenuItem tabindex={index} key={index}>
-> 246 {item.link.split('/').slice(-1)[0] === 'about', 'governance', 'people', 'blog' ? (
<StyledExternalLink href={item.link}>
<StyledTitle>{item.name}</StyledTitle>
</StyledExternalLink>
) : (
<StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer">
<StyledTitle>{item.name}</StyledTitle>
{item.description && <StyledDescription>{item.description}</StyledDescription>}
</StyledExternalLink>
)}
</StyledMenuItem>
)
})}
</MenuFlyout>
</StyledMenuTitle>
</StyledMenu>
)
}
This code:
someValue === 'about', 'governance', 'people', 'blog' ? 'x' : 'y'
is interpreted as 4 separate expressions, like:
someValue === 'about'; // returns true or false
'governance'; // returns 'governance'
'people'; // returns 'people'
'blog' ? 'x' : 'y'; // returns 'x'
So basically the first 3 are just useless expressions, because you don't do anything with the returned values.
The last one is the actually used value in your code, but it always returns 'x', because 'blog' is always truthy.
So you could just replace the whole condition 'blog' ? 'x' : 'y'; by just the value 'x' in your code.
Your code, including the "useless" one, is valid Javascript, but some code validation tool you are using, probably ESLint, doesn't allow a condition that will always return the same value, because obviously you wouldn't need a condition at all in such cases.