Home > OS >  Why do I get this warning and how to fix it "Functions are not valid as a React child..."
Why do I get this warning and how to fix it "Functions are not valid as a React child..."

Time:12-14

Full warning:

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

I'm making a simple Quiz App, and in this component I'm rendering TouchableOpacities that on click will navigate you to Test screen

 return (
        <View style={styles.container}>
          {
          isLoading ? 
            (<View style={{display:'flex',flex:1,justifyContent:'center',alignItems:'center'}}>
              <ActivityIndicator size="large" color="#0000ff"/>
            </View>):
            (
              <ScrollView>
                  {data.map(test =>(
                    <HomeTestComponent key={test.id} navig={navigation} name={test.name} tags={test.tags} description={test.description}/>
                  ))}

                  <Footer navig={navigation}/>
              </ScrollView>
            
            )
          }
        </View>
     );

CodePudding user response:

Somewhere you are returning a function in a render function

It'll look something like this:

const func = () => {}

return (
 () => {}
)

return (
  function() {}
)

return ( func )
  • Related