Multiple Conditions in RectNative shows two conditions in the same time

September 13, 2022

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>

>Solution :

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

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