CODEWITHSUNDEEP
javascriptreactjsnext.jsjsxconditional-operator
owuzan
owuzan

Reputation: 63

How to use if statement in array map function with next.js

if the remainder from the index number is 0, I want to wrap the code I need to show below and below. How can I do this? I tried like the ones below but it didn't work. I'm getting a syntax error.

{index% 3 == 0? ...: ...}

{index% 3 == 0 && ...}

export default function UserPosts() {
    // some code...
    return (
        <div className={styles.userPosts}>
            {postsList.map((post, index) => {
                return (
                    if (index % 3 == 0) {
                        <div className={styles.userPostsRow}>
                    }
                    <div className={styles.userPostWrapper}>
                        <div className={styles.userPostColumn}>
                            <Link href={`/${username}`}>
                                <a>
                                    <div className={styles.userPost}>
                                        <img src={post.image} alt="" />
                                    </div>
                                </a>
                            </Link>
                        </div>
                    </div>
                    if (index % 3 == 0) {
                        </div>
                    }
                )                
            })}
        </div>
    )
}

Upvotes: 5

Views: 37885

Answers (2)

juliomalves
juliomalves

Reputation: 50438

To reduce JSX duplication, you could extract the conditional logic to a component that would wrap the children components.

const ConditionalWrapper = ({ children, condition }) => {
    return condition ? (
        <div className={styles.userPostsRow}>{children}</div>
    ) : (
        children
    )
}

export default function UserPosts() {
    // some code...

    return (
        <div className={styles.userPosts}>
            {postsList.map((post, index) => {
                return (
                    <ConditionalWrapper condition={index % 3 == 0}>
                        <div className={styles.userPostWrapper}>
                            <div className={styles.userPostColumn}>
                                <Link href={`/${username}`}>
                                    <a>
                                        <div className={styles.userPost}>
                                            <img src={post.image} alt="" />
                                        </div>
                                    </a>
                                </Link>
                            </div>
                       </div>
                   </ConditionalWrapper>
                )                
            })}
        </div>
    )
}

Upvotes: 7

serraosays
serraosays

Reputation: 7919

Inside your return statement, you need to use JSX. Conditionals in JSX can take different forms, these are some I prefer:

If something exists ( implicit &&):

{ arr.map( (item) => {
  return(
    item.condition &&
    <div className="whatever">Your Content</div>
  )
})}

If a condition is met (condition with &&)

{ arr.map( (item, index) => {
  return(
    item.index % 3 &&
    <div className="whatever">Your Content</div>
  )
})}

If/else block (use ternary ? () : ())

{ arr.map( (item, index) => {
  return(
    item.index % 3 ? (
      <>
        <div className="whatever">True catch condition</div>
        <div className="whatever">Multiple HTML lines</div>
      </>   
    ) : (
      <div className="whatever">False catch condition</div> 
    )
  )
})}

Upvotes: 12

Related Questions