title: React Nested Map and Filter with conditional render does not work
body: <p>I spent so much time on fixing this issue, i decided to ask people for help.</p>
  <p>so basically what i am trying is to render a component.
  but before rendering i have 2 arrays<code>(labels, notes)</code>.
  and using one of them(labels), i used map function and inside that i used filter function to get only element i want to pass to the component that is rendered.</p>
  <p>I think there are some posts similar to this, but slightly different.
  and some answers said, &quot;when there is nested map function, the inner map needs to be wrap with tag like fragment&quot; but what i found in other posts did not wrap it...
  If anyone could help me clearing my confusion, would you please tell me if it is necessary or not.
  <a href="https://stackoverflow.com/questions/57742802/cannot-render-nested-maps-in-reactjs">Cannot Render Nested Maps In ReactJS</a> &lt;- says wrap with tag
  <a href="https://stackoverflow.com/questions/37716645/react-nested-map-foreach-wont-work">React Nested map/forEach wont work</a> &lt;- does not use tag</p>
  <p>here is my code.</p>
  <pre><code>let notes = [
      {id:1, position:3, content: &quot;apple&quot;},
      {id:2, position:2, content: &quot;banana&quot;},
      {id:3, position:0, content: &quot;orange&quot;},
  ]
  const labels = [&quot;Discussion questions&quot;, &quot;Quotes&quot;, &quot;Sensory Ques&quot;, &quot;Songs&quot;];
  </code></pre>
  <pre><code>const renderNotes = (notes) =&gt; {
      return labels.map(label =&gt; {
          console.log(&quot;---&quot; + label + &quot;---&quot;)
          return (
              notes.filter(note =&gt; {
              // console.log(positionLabels[note.position] + &quot; - &quot; + label);
              if (positionLabels[note.position] === label) {
                  console.log(&quot;BINGO&quot;);
                  return (
                      &lt;CustomComponent
                          key={note.id}
                          content={note.content}
                      /&gt;
                  )
              }
              })
          )
      })
  }
  </code></pre>
  <p>and inside the return i am calling this function like below</p>
  <pre><code>{
      renderNotes(notes) 
  }
  </code></pre>
  <p>when i was testing some like this</p>
  <pre><code>const renderNotes = (notes) =&gt; {
      return positionLabels.map(label =&gt; {
        return &lt;div&gt;
          {
            notes.filter(note =&gt; {
              return (
                &lt;div&gt;
                  TEST
                &lt;/div&gt;
              )
            })
          }
        &lt;/div&gt;
      })
    }
  </code></pre>
  <p>it did not even work,
  I have no idea what the error of <code>objects are not valid as a react child</code> is talking about.</p>