RectNative 中的多个条件同时显示两个条件

Question

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>

Answer 1

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>

Answer 2

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

Answer 3

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>