score:0

Accepted answer
{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>

score:0

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!

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

score:1

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>

Related Query

More Query from same tag