<p>I'm a newbie and can't figure out why one of my custom components shows up but the other doesn't. </p> <p>Home screen: </p> <pre class="brush:php;toolbar:false;">import React from 'react'; import {View, Text} from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'; import { DrawerActions } from '@react-navigation/native'; import Ionicons from '@expo/vector-icons/Ionicons'; import { useGrid } from '../context/gridProvider'; // Context provider import Exam from '../components/Exam'; import Clock from '../components/clock'; const Home = ({navigation}) => { const {checkedItems, setCheckedItmes} = useGrid() return ( <SafeAreaView style={{flex:1}}> <ScrollView style={{padding:20}}> <View style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}> <Text style={{fontSize: 16, fontWeight: 700}}></Text> <Text style={{fontSize: 32, fontWeight: 700, color:'#444'}}>Today’s exam</Text> <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}> <Ionicons name="menu" size={32} color="#333" /> </TouchableOpacity> </View> <Clock /> // The clock is displayed <Exam /> // The exam list is not displayed </ScrollView> </SafeAreaView> ) } export default Home</pre> <p>The clock is displayed, but the exam is not.</p> <p>Examination components:</p> <pre class="brush:php;toolbar:false;">import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; import { useGrid } from '../context/gridProvider'; import examData from '../data/trialData'; const Exam = () => { const {checkedItems, setCheckedItmes} = useGrid(); checkedItems.forEach((key) => { console.log(examData[key-1].title); return( <View style={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}> <Text style={{color: '#333'}}>{examData[key-1].title}</Text> <Text>{examData[key-1].startTime}</Text> <Text>{examData[key-1].endTime}</Text> </View> ) }); } export default Exam</pre> <p> (Note: my first object ID is 1, not zero, so subtract 1 from the key value) </p> <p>I use context to handle global availability to determine which exams are selected from a list on another screen. </p> <p>When you select an exam from the list, the <code>console.log(examData[key-1].title);</code> statement does output the correct information to the terminal, except for the clock. Otherwise, nothing is displayed in the app. </p> <p>I tried removing the clock component to prevent it from pushing the list off the page. </p> <p>Does anyone know what I did wrong...</p>

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { useGrid } from '../context/gridProvider';
import examData from '../data/trialData';

const Exam = () => {
  
  const {checkedItems, setCheckedItmes} = useGrid();

    checkedItems.map((key) => {

        console.log(examData[key-1].title);
        
        return(

          <View style={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}>
              <Text style={{color: '#333'}}>{examData[key-1].title}</Text>
              <Text>{examData[key-1].startTime}</Text>
              <Text>{examData[key-1].endTime}</Text> 
          </View>  

        )
    });
}

export default Exam