Reactjs - Multiple if conditions inside map function

Question

I am trying to add a progress bar with different colors levels at different values. I have 4 different value option. I am trying to use if/ else if conditions for a particular case but not working. Is there any better approach.

<ul className="venue-list">
      {searchVenues.map(item => (
        <li className="venue-list__item" key={item.venue.id}>
          <Link
            to={`/venues/${item.venue.id}`}
            className="venue-list__itemLink"
          >
            <div className="venue-list__cover" />
            <img
              src={`${item.venue.photos.groups[0].items[0].prefix}128${item.venue.photos.groups[0].items[0].suffix}`}
              alt="Venue Best Img"
              className="venue-list__image"
            />
            <div className="venue-list__onTopData">
              <h3 className="venue-list__venue-name">{item.venue.name}</h3>
              <div className="venue-list__venueInfo">
                <div className="venue-list__userWrapper">
                  <div className="left">
                    <img src="/image/user-icon.png" alt="Icon" />
                  </div>
                  <div className="right">
                    <span className="user-text">{item.venue.stats.tipCount}</span>
                  </div>
                </div>
                <div className="venue-list__tagWrapper">
                  <div className="left">
                    <img src="/image/tag-icon.png" alt="Icon" />
                  </div>
                  <div className="right">
                    <div className="bar">
                    {
                      if(item.venue.price.tier === 1){
                        return <span className="percentage one"></span>
                      } else if(item.venue.price.tier === 2) {
                        return <span className="percentage one"></span>
                                <span className="percentage two"></span>
                      } else if(item.venue.price.tier === 3) {
                        return <span className="percentage one"></span>
                                <span className="percentage two"></span>
                                <span className="percentage three"></span>
                      } else if (item.venue.price.tier === 4) {
                        return  <span className="percentage one"></span>
                          <span className="percentage two"></span>
                          <span className="percentage three"></span>
                          <span className="percentage four"></span>
                      }
                    }

                    </div>
                  </div>
                </div>
                <div className="venue-list__ratingWrapper">
                  <img src="/image/triangle.png" alt="icon" />
                  <span className="rating-text">{item.venue.rating}</span>
                </div>
              </div>
            </div>
          </Link>
        </li>
      ))}
    </ul>

Now I am getting an error "Syntax error: Unexpected toke for if statement". Whats the best approach to handle cases in map function.

@Fecosos Thanks for the response man. I am asking in general how to do conditions inside map function as I tried using switch as well. My error is syntax related. I am getting the data correctly. — MontyGoldy
– MontyGoldy, Commented Apr 26, 2018 at 22:18

sumit · Accepted Answer · 2018-04-26 22:22:42Z

2

You can use ternary operator

<div className="bar">
                    {
                      item.venue.price.tier === 1?
                     <div> <span className="percentage one"></span></div>
                      :item.venue.price.tier === 2?
                       <div> <span className="percentage one"></span>
                              <span className="percentage two"></div></span>
                      :item.venue.price.tier === 3 ?
                        <div> <span className="percentage one"></span>
                                <span className="percentage two"></span>
                                <span className="percentage three"> 
                              </span></div>
                     :item.venue.price.tier === 4?
                        <div>  <span className="percentage one"></span>
                          <span className="percentage two"></span>
                          <span className="percentage three"></span>
                          <span className="percentage four"></span> </div>
                    :''

                }
                    </div>

edited Apr 26, 2018 at 22:22

answered Apr 26, 2018 at 22:19

sumit

15.5k14 gold badges75 silver badges113 bronze badges

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

2 Comments

MontyGoldy Over a year ago

thanks you for the response. Is it wrong approach to use if else inside map function ?

Jonny Rathbone Over a year ago

You can use if else inside map, as you're inside a js function, not jsx, but I don't think you want the return words as detailed here.

Umarkhon · Accepted Answer · 2022-08-19 11:00:56Z

{dummyData.map((item) => {
      if (item.questionType === "singleselect") {
              return (
                <>
                  <SingleSelectItem
                    questionText={item.questionText}
                    a={item.a}
                    b={item.b}
                    c={item.c}
                  />
                </>
              );
            } else if (item.questionType === "multiselect") {
              return (
                <>
                  <MultipleSelectItem
                    questionText={item.questionText}
                    a={item.a}
                    b={item.b}
                    c={item.c}
                  />
                </>
              );
            }
            return (
              <>
                <TextInputItem questionText={item.questionText} />
              </>
            );
          })}

Jonny Rathbone · Accepted Answer · 2018-04-26 22:19:46Z

0

{item.venue.price.tier === 1 && <span className="percentage one"></span>}

If/else statements don't work in JSX, because of how the 'language' is designed to make calls / construct objects. This is how to achieve conditional rendering.

Bear in mind also that you will also have to return just one element. So you will have to group the latter options like so:

<div>
    <span className="percentage one"></span>
    <span className="percentage two"></span>
    <span className="percentage three"></span>
    <span className="percentage four"></span>
</div>

answered Apr 26, 2018 at 22:19

Jonny Rathbone

1797 bronze badges

Comments

Vijay Dev · Accepted Answer · 2018-04-26 22:23:42Z

The problem can be solved by extracting the section to a pure function that can return the set of <span> as an array. Here is a way to refactor your code:

const getPriceTier = (tier = 0) => {
    if (tier > 4) {
        console.log('Config only supports till "percentage four"');
    }

    const config = {
        0: 'one',
        1: 'two',
        2: 'three',
        3: 'four'
    };
    const items = Array.from({ length: tier }, (v, i) => i);
    // items = [0, 1, 2, tier - 1];

    return items.map((i) => {
        return <span className={`percentage ${config[i]}`}></span>
    })
}

And then in the render just use it as:

<div className="bar">{getPriceTier(item.venue.price.tier)}</div>

Hope this helps!

Fecosos · Accepted Answer · 2018-04-26 22:55:18Z

0

To simplify your example you could use something like

const Test = () => {
  const arr = [1,2,3,4]
  return (
    <div>
      {arr.map(e => {
        return (
          (e > 1) ?
          <p key={e}>this is true {e}</p>
          :
          <p key={e}>this is false {-e}</p>
        )
      })}
    </div>
  )
}

answered Apr 26, 2018 at 22:55

Fecosos

9747 silver badges17 bronze badges

Collectives™ on Stack Overflow

Reactjs - Multiple if conditions inside map function

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related