title: How Can I Fetch Data into My Datatable in React Native?
body: <p>I want to Fetch Data into My Datatable I'm getting THis Error: <em><strong>Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.</strong></em></p>
  <h2>This is the Code if Someone can help me :</h2>
  <pre><code>import React, { useState,useEffect } from 'react';
  import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal } from 'react-native';
  import { DataTable } from 'react-native-paper';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
  import COLORS from '../src/conts/colors';
  import Button from '../src/views/components/Button';
  
  
  const List = ({navigation}) =&gt; {
  
  
  
       const [data,setData] = useState([])
       const [loading,setLoading]= useState(true)
  
  
       const fetchData = ()=&gt;{
          fetch(&quot;https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494&quot;)
          .then(res=&gt;res.json())
          .then(results=&gt;{
  
              setData(results)
              setLoading(false)
  
  
          })
       }
  
       useEffect(()=&gt;{
            fetchData()
       },[])
  
  
    const renderList = ((item)=&gt;{
  
      return(
  
        &lt;DataTable.Row style={styles.tableRow} key={item.businessid}&gt;
              &lt;DataTable.Cell textStyle={{color: '#777777',fontFamily: 'Roboto'}} onPress={() =&gt; navigation.navigate(&quot;Edit&quot;,{item})} &gt;{item.title}&lt;/DataTable.Cell&gt;
              &lt;DataTable.Cell textStyle={{color: '#FEB296', fontFamily: 'Roboto'}}&gt;{item.title}&lt;/DataTable.Cell&gt;
              &lt;DataTable.Cell textStyle={{color: '#777777', fontFamily: 'Roboto'}}&gt;{item.price}&lt;/DataTable.Cell&gt;
          &lt;/DataTable.Row&gt;
      )
    })
  return (
    &lt;SafeAreaView style={{ flex: 1}}&gt;
    &lt;ScrollView
      contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}&gt;
      &lt;Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold', fontFamily: 'Roboto',textAlign: 'center'}}&gt;
        List of Companies
      &lt;/Text&gt;
      &lt;Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10, fontFamily: 'Roboto', textAlign: 'center'}}&gt;
        Check Our Companies Details
      &lt;/Text&gt;
    &lt;DataTable style={styles.container}   &gt;
    &lt;DataTable.Header style={styles.tableHeader}  &gt;
      &lt;DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}&gt;BusinessId&lt;/DataTable.Title&gt;
      &lt;DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}&gt;Title&lt;/DataTable.Title&gt;
      &lt;DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}&gt;Price&lt;/DataTable.Title&gt;
    &lt;/DataTable.Header&gt;
    &lt;/DataTable&gt;
      {renderList}
    &lt;/ScrollView&gt;
    &lt;/SafeAreaView&gt;
  
  
  );
  };
  
  export default List;
  
  const styles = StyleSheet.create({
  container: {
      padding: 0,
  },
  tableHeader: {
    backgroundColor: '#50E3C2',
  },
  tableRow: {
    backgroundColor: '#fff',
  },
  
  });
  </code></pre>
  <h2>This is The Error:</h2>
  <p><a href="https://i.stack.imgur.com/dGK94.png" rel="nofollow noreferrer">enter image description here</a></p>