How Can I Fetch Data into My Datatable in React Native?

Question

I want to Fetch Data into My Datatable I'm getting THis Error: 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.

This is the Code if Someone can help me 🙏🏻:

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}) => {



     const [data,setData] = useState([])
     const [loading,setLoading]= useState(true)


     const fetchData = ()=>{
        fetch("https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494")
        .then(res=>res.json())
        .then(results=>{

            setData(results)
            setLoading(false)


        })
     }

     useEffect(()=>{
          fetchData()
     },[])


  const renderList = ((item)=>{

    return(

      <DataTable.Row style={styles.tableRow} key={item.businessid}>
            <DataTable.Cell textStyle={{color: '#777777',fontFamily: 'Roboto'}} onPress={() => navigation.navigate("Edit",{item})} >{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#FEB296', fontFamily: 'Roboto'}}>{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#777777', fontFamily: 'Roboto'}}>{item.price}</DataTable.Cell>
        </DataTable.Row>
    )
  })
return (
  <SafeAreaView style={{ flex: 1}}>
  <ScrollView
    contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
    <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold', fontFamily: 'Roboto',textAlign: 'center'}}>
      List of Companies
    </Text>
    <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10, fontFamily: 'Roboto', textAlign: 'center'}}>
      Check Our Companies Details
    </Text>
  <DataTable style={styles.container}   >
  <DataTable.Header style={styles.tableHeader}  >
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>BusinessId</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Title</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Price</DataTable.Title>
  </DataTable.Header>
  </DataTable>
    {renderList}
  </ScrollView>
  </SafeAreaView>


);
};

export default List;

const styles = StyleSheet.create({
container: {
    padding: 0,
},
tableHeader: {
  backgroundColor: '#50E3C2',
},
tableRow: {
  backgroundColor: '#fff',
},

});

This is The Error:

enter image description here

Answer 1

Hello Hassane . This React error is very common no worries. The problem is that you are trying (by mistake) to render a function instead of a component (like the error says). In your code this is happening here:

{...}
 {renderList}
{...}

renderlist is a function so you cannot render it.

You have two options here:

• Call the function: {renderList()}
• Use the component with JSX ( recommended ):

const RenderList = (item)=>{...} //Use capital as first char to follow convention here


{...}
</DataTable>
    <RenderList />
  </ScrollView>
{...}

EDIT :

Also for the data to be rendered you need to loop through it and send the info to your component:

 const RenderCollection = ({item}) => // note that args has changed here, {item} its a shortcut to avoid the need to use props.item {...} </DataTable> { data && data.articles.map(article => <RenderCollection item={article} />) } </ScrollView> {...}