TypeError: render is not a function. (In 'render(newValue)', 'render' is an instance of Object)

Question

import{ React, useContext} from 'react';  
import { Button, View, Text } from 'react-native';  
import { NavigationContainer, useNavigation ,useRoute } from '@react-navigation/native';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';  
import { LoginContexts } from '../Contexts/LoginContexts';  


function Screen2() {
  
  const {getEmail} = useContext(LoginContexts);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <LoginContexts.Consumer >
        <Text>{getEmail}</Text>   
      </LoginContexts.Consumer> 
    </View>
  );
}

export default Screen2;

This is my consumer part is which I want to display the text which is present in getEmail in Text View. please help to solve this problem.

Answer 1

The issue is that LoginContexts.Consumer component expects a render function.

Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

The useContext hook is the consumer, remove the LoginContexts.Consumer component.

function Screen2() {
  const {getEmail} = useContext(LoginContexts);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{getEmail}</Text>
    </View>
  );
}