Multiple Conditions in RectNative shows two conditions in the same time

Viewed 35

component1 should show up if options is less than 4. component2 should show up if options is more than 4. component3 should show up if options is more than 7. Right now if my options array has less than 4 values it displays together component1 with component3. Why is that so?

<View>
{options.length < 4 && (
<Component1
 options={options}
/>
)}
{options.length > 4 && (
<Component2 options={options}/>
)}
{options.length < 7 && (
<Component3 options={options}/>
)}
</View>
2 Answers

try this,

<View>
{options.length < 4 && (
<Component1 options={options}/>
)}
{options.length > 4 && (
<Component2 options={options}/>
)}
{options.length > 7 && (     // change your code here
<Component3 options={options}/>
)}
</View>

Try this code you need to check for multiple conditions if there is any

      <View>
        {options.length < 4 && 
          <Component1 options={options} />
        }
        {options.length > 4 && options.length < 7 && (
          <Component2 options={options} />
        )}
        {options.length > 7 && 
          <Component3 options={options} />
        }
      </View>
Related