title: When changing react state and conditional rendering, getting: Error: Text strings must be rendered within a <Text> component
body: <p>I am receiving this error: <code>Error: Text strings must be rendered within a &lt;Text&gt; component.</code> when I update the state, which is a list that contains components. I am trying to add a component, so I don't see why I would need a <code>&lt;Text&gt;</code> component. This list is used to render drawer components that allow the user to view the pages of the clubs they are a part of.</p>
  <pre><code>  const [public_list, setPublicList] = useState([]);
    const [private_list, setPrivateList] = useState([]);
    const [list, setList] = useState([]);
  
    const homeIcon = &lt;Icon name=&quot;home-outline&quot; color={'black'} size={20} /&gt;;
  
    var user_doc;
  
    async function fetchData() {
      user_doc = await firestore()
        .collection('users')
        .doc(auth_user.uid)
        .get()
        .catch(function (error) {
          console.log(
            'There has been a problem with your fetch operation: ' +
              error.message,
          );
        });
  
      const userData = user_doc['_data'];
  
      let public_clubList = userData['public_clubs'];
      console.log(user_doc['public_clubs']);
  
      for (let item = 0; item &lt; public_clubList.length; item++) {
        let name = public_clubList[item]['clubName'];
  
        const newList = list.concat('hey');
  
        const newPublicList = public_list.concat(
          &lt;DrawerItem
            icon={({color, size}) =&gt; homeIcon}
            label={toString(name)}
            onPress={() =&gt; {
              props.navigation.navigate('ClubPage', {hello});
            }}
          /&gt;,
        );
  
        setList(newList);
        setPublicList(newPublicList);
  
        console.log(name);
      }
      console.log(user_doc['public_clubs'][1]['clubName']);
    }
  </code></pre>
  <p>The error occurs at <code>setList(newList)</code>. I call <code>fetchData</code> during:</p>
  <pre><code>useEffect(() =&gt; {
      if (list.length == 0) {
        fetchData();
      }
    });
  </code></pre>
  <p>If you were wondering, this is what my userData is:</p>
  <pre><code>{&quot;email&quot;: &quot;johndoe@email.com&quot;, &quot;fullName&quot;: &quot;John Doe&quot;, &quot;id&quot;: &quot;JbuhzofKDEe2ImMl9DPYpBbuVzG2&quot;, &quot;private_clubs&quot;: [{&quot;clubName&quot;: &quot;Kool kids &quot;, &quot;id&quot;: &quot;1903440d-e06a-4117-bc41-d27fabb80583&quot;}, {&quot;clubName &quot;: &quot;Test&quot;, &quot;id&quot;: &quot;53fe982f-318e-4903-a439-9e8271035393&quot;}], &quot;public_clubs&quot;: [{&quot;clubName&quot;: &quot;Testing adding users n stuff&quot;, &quot;id&quot;: &quot;a6cb1dcb-cfdd-48a4-b673-671519fbe6dd&quot;}, {&quot;clubName&quot;: &quot;Hey guyyys&quot;, &quot;id&quot;: &quot;c219a611-26c3-44d3-9d66-396b0f9a738d&quot;}], &quot;userName&quot;: &quot;johndoe&quot;}
  </code></pre>
  <p>This is what my return statement is. The rest of the drawers load fine.</p>
  <pre><code>return (
      &lt;View style={{flex: 1, flexDirection: 'column'}}&gt;
        &lt;DrawerContentScrollView {...props} style={{flex: 10}}&gt;
          &lt;DrawerItem
            icon={({color, size}) =&gt; (
              &lt;Icon name=&quot;home-outline&quot; color={'black'} size={20} /&gt;
            )}
            label={hello}
            onPress={() =&gt; {
              props.navigation.navigate('ClubPage', {hello});
            }}
          /&gt;
          {list}
          {public_list}
          {private_list}
        &lt;/DrawerContentScrollView&gt;
        &lt;Drawer.Section style={{flex: 1}}&gt;
          &lt;DrawerItem
            icon={({color, size}) =&gt; (
              &lt;Icon name=&quot;buffer&quot; color={'black'} size={20} /&gt;
            )}
            label=&quot;FeedPage&quot;
            onPress={() =&gt; {
              props.navigation.navigate('FeedPage');
            }}
          /&gt;
        &lt;/Drawer.Section&gt;
        &lt;DrawerItem
          icon={({color, size}) =&gt; (
            &lt;Icon name=&quot;pen-plus&quot; color={'black'} size={20} /&gt;
          )}
          label=&quot;Make a Club&quot;
          onPress={() =&gt; {
            props.navigation.navigate('MakeClub');
          }}
        /&gt;
        &lt;DrawerItem
          icon={({color, size}) =&gt; (
            &lt;Icon name=&quot;account&quot; color={'black'} size={20} /&gt;
          )}
          label=&quot;My Profile&quot;
          onPress={() =&gt; {
            props.navigation.navigate('ProfilePage');
          }}
        /&gt;
      &lt;/View&gt;
    );
  </code></pre>