title: How to implement UI based on nested array?
body: <p>I have an array with some dynamic value which will have array of array and according to inner array length need to show <strong>OR</strong> text.</p>
  <p><strong>Example:</strong></p>
  <p><strong>JSON data:</strong></p>
  <pre><code>const renderArr = [
    {
      label: &quot;Abc&quot;,
      value: []
    },
    {
      label: &quot;XyZ&quot;,
      value: [&quot;Test&quot;, &quot;Exam&quot;]
    },
    {
      label: &quot;Dex&quot;,
      value: []
    },
    {
      label: &quot;Mno&quot;,
      value: [&quot;Momo&quot;, &quot;Pizza&quot;]
    },
    {
      label: &quot;Pqr&quot;,
      value: []
    }
  ];
  </code></pre>
  <p>According to above structure there are value in  <strong>renderArr[<a href="https://codesandbox.io/s/goofy-firefly-265vs?file=/src/App.js:432-437" rel="nofollow noreferrer">1</a>].value and renderArr[<a href="https://i.stack.imgur.com/WsL0j.png" rel="nofollow noreferrer">3</a>].value</strong>. So i need to show &quot;OR&quot; text between these in UI</p>
  <p><strong>Expected Logic:</strong></p>
  <pre><code>I want to show OR condition based on below condition
  
  let currentValue = renderArr[index].value.length &gt; 0 then
  
  If nextValue = renderArr[index+1].value.length &gt; 0 then show OR condition, NOTE: it'll check till it not found the value.length &gt; 0 for every index
  </code></pre>
  <p>Below is my logic, which is not working properly.</p>
  <p><strong>My Logic:</strong></p>
  <pre><code>shouldShowNextOr = (value, rootIndex) =&gt; {
      let shouldShow = false;
      let f = renderArr;
      if (rootIndex &lt; 4) {
        switch (rootIndex) {
          case 0:
            shouldShow =
              f[1].value.length &gt; 0 ||
              f[2].value.length &gt; 0 ||
              f[3].value.length &gt; 0 ||
              f[4].value.length &gt; 0
                ? true
                : false;
            break;
          case 1:
            shouldShow =
              f[2].value.length &gt; 0 ||
              f[3].value.length &gt; 0 ||
              f[4].value.length &gt; 0
                ? true
                : false;
            break;
          case 2:
            shouldShow =
              f[3].value.length &gt; 0 || f[4].value.length &gt; 0 ? true : false;
            break;
          case 3:
            shouldShow = f[4].value.length &gt; 0 ? true : false;
            break;
          default:
            shouldShow = false;
        }
      }
  
      return shouldShow;
    };
  </code></pre>
  <p>Here is <a href="https://codesandbox.io/s/goofy-firefly-265vs?file=/src/App.js:432-437" rel="nofollow noreferrer">online codesandbox</a></p>
  <p><strong>Current Output</strong></p>
  <p><a href="https://i.stack.imgur.com/EUZBO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EUZBO.png" alt="enter image description here" /></a></p>
  <p><strong>Expected Output</strong></p>
  <p><a href="https://i.stack.imgur.com/WsL0j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WsL0j.png" alt="enter image description here" /></a></p>