react native moving data with useContext-CodePudding

this is a code from a tutorial about moving data with context the thing is the instructor is using 4.x navigator and since 4.x is not supported I tried to modify the navigation, but when I wrap the navigation with <BlogProvider></BlogProvider> nothing appears in the IndexScreen, as shown in picture 1.

and when i remove the <BlogProvider></BlogProvider> what I get is only this <Text>Index Screen</Text> and the Flatlist doesn't appear in the screen as shown in picture 2. .

and in both cases I get no error.

this is the App.js

import { StyleSheet, Text, View } from 'react-native';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import IndexScreen from './src/screens/IndexScreen';
import {BlogProvider} from './src/context/BlogContext';


const Stack = createNativeStackNavigator();
export default function App() {
  return (
   
     <BlogProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName='IndexScreen'>
          <Stack.Screen name='Blog' component={IndexScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
      </BlogProvider>
  
  );
}

const styles = StyleSheet.create({});

this is the IndexScreen.js

import React, {useContext} from 'react';
import {Text, View, StyleSheet, FlatList} from 'react-native';
import BlogContext from '../context/BlogContext';

const IndexScreen = ()=>{

    const blogPosts = useContext(BlogContext);
    
    return (
        <View>
            <Text>Index Screen</Text>
            <FlatList 
                data={blogPosts}
                keyExtractor={(blogPost)=> blogPost.title}
                renderItem={( { item } )=>{
                    <Text>{item.title}</Text>
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({});

export default IndexScreen;

this is the BlogContextScreen.js

import React from 'react';


const BlogContext = React.createContext();

export const BlogProvider = ({ Children })=> {
const blogPosts = [{title: 'Blog Post #1'}, {title: 'Blog Post #2'}, {title: 'Blog Post #3'}];

    return <BlogContext.Provider value={blogPosts}>
        {Children}
    </BlogContext.Provider>   
};

export default BlogContext;

I will be glad for any support and again as you can see that I am still learning

Thank you in advance

CodePudding user response：

The problem is not with the navigation. you have a syntax error in the BlogProvider component. the return block must be wrapped in parentheses:

import React from 'react';

const BlogContext = React.createContext();

export const BlogProvider = ({ children }) => {
  const blogPosts = [
    { title: 'Blog Post #1' },
    { title: 'Blog Post #2' },
    { title: 'Blog Post #3' },
  ];

  return (
    <BlogContext.Provider value={blogPosts}>
      {children}
    </BlogContext.Provider>
  );
};

export default BlogContext;

CodePudding user response：

I found out that I forgot to add a return to the renderItem function `const IndexScreen = ()=>{

const blogPosts = useContext(BlogContext);

return (
    <View>
        <Text>Index Screen</Text>
        <FlatList 
            data={blogPosts}
            keyExtractor={(blogPost)=> blogPost.title}
            renderItem={( { item } )=>{
               return <Text>{item.title}</Text>
            }}
        />
    </View>
)};`