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

Question

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

serraosays · Accepted Answer · 2021-01-11 15:13:06Z

12

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

edited Jan 11, 2021 at 15:13

answered Jan 10, 2021 at 19:17

serraosays

8,0893 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

owuzan Over a year ago

When I do as you mentioned above, the last part of the code is not colored in my editor and it actually works incorrectly. I think the reason why it fails here is because the div element is closed directly below. It seems to me that jsx cannot understand it is opened above. Editor: cdn.discordapp.com/attachments/793604426144415778/… Working image: cdn.discordapp.com/attachments/793604426144415778/…

serraosays Over a year ago

There are a couple errors in your code. You want to wrap your entire ternary expression in (). And in JSX, all HTML is read as JS (which can be confusing if you're new to it). As such, you can only return one object at a time. So you need to wrap all of your HTML in React Fragments <></> - these consolidate your HTML into an object. I updated my example to show you, check it out.

juliomalves · Accepted Answer · 2021-08-13 19:51:39Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related