I want to render a component based on a variable being true or false. At the moment the condition comes up as true but the component isn't rendering at all.
Here is my code:
<div className={styles.container}>
{array.map(item => {
router.query.slug != item ? <Component /> : null;
})}
</div>
My console is returning true for the condition router.query.slug != item so what am I missing?
Thanks
You are missing to return the component from map function.
Here is the example that will match your problem:
Solution 1
<div className={styles.container}>
{array.map(item => {
return router.query.slug != item ? <Component /> : null;
})}
</div>
Solution 2 with single line
<div className={styles.container}>
{array.map(item => router.query.slug != item ? <Component /> : null)}
</div>
You can read about map function in here.
If you use the block syntax, you need to specify the return keyword. Learn more about arrow-function
Try this way.
Example:
<div className={styles.container}>
{array.map(item => {
return (router.query.slug != item ? <Component /> : null)
})}
</div>