I have the following TypeScript code snippet:
export default class SingleNews extends React.Component<INews, {}> {
public render(): React.ReactElement<INews> {
return (
<>
{this.props.featured
? this.props.recentNews.map(post => (
<a
className={styles.singleNews}
href={post.link}
key={post.Title}
>
<div
className={styles.singleNews__image}
style={{ backgroundImage: `url(${post.image})` }}
/>
<div className={styles.singleNews__content}>
<div className={styles.singleNews__content__info}>
<span className={styles.singleNews__content__info__label}>{post.Featured}</span>
<span className={styles.singleNews__content__info__date}>
{post.date}
</span></div>
</div>
<div className={styles.singleNews__content}>
<div className={styles.singleNews__content__info}>
<h2 className={styles.singleNews__content__info__title}>
{post.Title}
</h2>
{post.likes ? (
<div
className={styles.singleNews__content__info__reactions}
>
<span
className={
styles.singleNews__content__info__reactions__likes
}
>
<Icon iconName='Like' />
{post.likes}
</span>
<span>
<Icon iconName='ActionCenter' />
{post.coments}
</span>
</div>
) : null}
</div>
</div>
</a>
))
However, I want to dynamically render different HTML based on the current index. When I attempted to use an if statement inside the map function, I encountered an error stating "expression expected" on the if. Can anyone provide suggestions or advice?