Nothing was returned from render. This usually means a return statement is missing

Question

Im trying to get data from a json file into my Lesson1.js, what its supposed to do is after i click on the button on the homescreen it has to go to the Lesson1.js page but after clicking it, i get the error message: Lesson1(...) Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

import React, {Component, useState} from 'react';
import { ActivityIndicator, StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../styles/global';
import data from '../assets/json/default.json';

export default function Lesson1 ({ App, navigation }) {

    const pressHandler1 = () => {
        navigation.goBack();
      }

      // const DATA = [
      //   {
      //     id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      //     title: 'First Item',
      //   },
      //   {
      //     id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      //     title: 'Second Item',
      //   },
      //   {
      //     id: '58694a0f-3da1-471f-bd96-145571e29d72',
      //     title: 'Third Item',
      //   },
      //   {
      //     id: '57694a0f-3db1-472f-bc96-145571a29d72',
      //     title: 'Fourth Item',
      //   },
      // ];

      function Item({ name, id, title, selected, onSelect }) {
        return (
          <TouchableOpacity
            onPress={() => onSelect(id)}
            style={[
              styles.item,
              { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
            ]}
          >
            <Text style={styles.name}>{name}</Text>
          </TouchableOpacity>
        );
      }

        const [selected, setSelected] = React.useState(new Map());

        const onSelect = React.useCallback(
          id => {
            const newSelected = new Map(selected);
            newSelected.set(id, !selected.get(id));

            setSelected(newSelected);
          },
          [selected],
        );
}
export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true, // check if json data (online) is fetching
      dataSource: [], // store an object of json data
    };
  }

  componentDidMount() {
           // set state value
            this.setState({
              isLoading: false, // already loading
              dataSource: responseJson.info
            });
  }


  render() {
    // show waiting screen when json data is fetching
    if (this.state.isLoading) {
      return (
        <View style={globalStyles.container}>
          <ActivityIndicator/>
        </View>
      );
    }

    return (
      <View style={globalStyles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => {
            return (
              <View>
                <Text>{data.name}</Text>
              </View>
            );
          }}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
        container: {
          flex: 1,
        },
        item: {
          backgroundColor: '#f9c2ff',
          padding: 20,
          marginVertical: 8,
          marginHorizontal: 16,
        },
        title: {
          fontSize: 32,
        },
      });

Answer 1

Your function component Lesson1 does indeed not return anything.

Answer 2

Your Lesson1 component has no return statement, try changing it to:

import React, {Component, useState, Fragment} from 'react';
import { ActivityIndicator, StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../styles/global';
import data from '../assets/json/default.json';

// const DATA = [
      //   {
      //     id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      //     title: 'First Item',
      //     name: 'First Item',
      //     selected: false
      //   },
      //   {
      //     id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      //     title: 'Second Item',
      //     name: 'Second Item',
      //     selected: false
      //   },
      //   {
      //     id: '58694a0f-3da1-471f-bd96-145571e29d72',
      //     title: 'Third Item',
      //     name: 'Third Item',
      //     selected: false
      //   },
      //   {
      //     id: '57694a0f-3db1-472f-bc96-145571a29d72',
      //     title: 'Fourth Item',
      //     name: 'Fourth Item',
      //     selected: false
      //   },
      // ];

function Item({ name, id, title, styles, selected, onSelect }) {
        return (
          <TouchableOpacity
            onPress={() => onSelect(id)}
            style={[
              styles.item,
              { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
            ]}
          >
            <Text style={styles.name}>{name}</Text>
          </TouchableOpacity>
        );
      }

export default function Lesson1 ({ App, navigation }) {

      const pressHandler1 = () => {
        navigation.goBack();
      }
      const [data, setData] = useState(DATA) //use the DATA array above

      const onSelect = id => {
       let newDataRef = {...data} //creates a new reference to data
       let dataItemPreviousState = newDataRef.find(item => item.id === id).selected //find the previous selections status of item being selected

       //update all other items as not selected
       newDataRef.map(item => {
        item.selected = false
        return item
       })
       //update the selected item
       newDataRef.find(item => item.id === id).selected = !dataItemPreviousState
       setData(newDataRef)
     }

    return(
     <Fragment>
     {data.map((item, itemIndex) => {

      //the {...item} syntax below will spread the item object into props for the component

      return(
        <Item key={itemIndex} onSelect={onSelect} {...item}/>
       )
     }}
     </Fragment>
    )
}