Multiple Conditions in RectNative shows two conditions in the same time-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

Hi you can write like it

 const renderComponents = (options) => {
    if (options.length < 4) {
        return (
            <Component1
                options={options}
            />
        )
    } else if (options.length < 4) {
        return (
            <Component2 options={options} />
        )
    } else if (options.length > 7) {
        return (
            <Component3 options={options} />
        )
    }
}

and call the renderComponents where you want to use

{renderComponents(options)}

hopefully it will be helpful for you