I have the following Type Script code:-

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>
                                                
                      ))

but i need to check the current Index and render different html accordingly .. if i try this i will get this error:-

export default class SingleNews extends React.Component<INews, {}> {
    public render(): React.ReactElement<INews> {
        return (
            <>
                {this.props.featured
                    ? this.props.recentNews.map((post,index) => (
                if(index=0)

i got "expression expected" on the if? any advice?

CodePudding user response：

The problem is that you have a statement as body for your arrow function (which was fine before).

Since now you need to add the if to check the index, you need a block:

{this.props.featured
   ? this.props.recentNews.map((post,index) => {  // <-- this
                if(index=0) { 
                  // etc
                }
                return <a> .... </a>
     }
}