Invariant Violation: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Question

This is my first project in React Native with Redux, I have a component(MyApp) which i am importing in index.js. but it is giving above error.

index.js -

import React from 'react';
import { AppRegistry } from 'react-native';
import MyApp from './component/MyApp';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import  rootReducer from './reducers';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));
const App = () => {
    <Provider store={store}>
        <MyApp/>
    </Provider>
}

AppRegistry.registerComponent('learningRedux', () => App);

MyApp.js

import React, { Component } from 'react';
import {
    Text, View, TouchableHighlight
} from 'react-native';

import { connect } from 'react-redux';
import { fetchPeopleFromAPI } from '../actions/index';

export class MyApp extends Component {

    render() {
        const { people, isFetching } = props.people
        return (
            <View style={{
                margin: 100,
                paddingLeft: 20,
                paddingRight: 20
            }}
            >
                <Text style={{
                    fontSize: 30,
                    textAlign: 'center'
                }}> Redux App </Text>

                <TouchableHighlight style={{
                    backgroundColor: 'blue',
                    height: 60,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
                    onPress={() => {
                        props.getPeople
                    }}>
                    <Text style={{
                        color: 'white'
                    }}> Fetch Data </Text>
                </TouchableHighlight>
                {
                    isFetching && <Text> Loading... </Text>
                }
                {
                    people.length ? (
                        people.map((person, index) => {
                            return (
                                <View key={index}>
                                    <Text> Name : {person.name} </Text>
                                    <Text> Birth Year : {person.birth_year} </Text>
                                </View>
                            )
                        }
                        )
                    ) : null
                }
            </View>
        );
    }
}

mapStateToProps = (state) => {
    return {
        people: state.peopleReducer
    }
}

mapDispatchToProps = (dispatch) => {
    return {
        getPeople: () => dispatch(fetchPeopleFromAPI())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp)

I tried another method by creating a const MyApp instead of class and used arrow function by passing props as an argument and then only used return(not render) but it is still not working. Thanks.

Answer 1

const App = () => {
    <Provider store={store}>
        <MyApp/>
    </Provider>
}

Arrow function above return null. If you're using curly brackets, you should add return keyword. Try add a return keyword first.

const App = () => {
    return (
        <Provider store={store}>
             <MyApp/>
        </Provider>
    )
}

Compare this code below.

const add = (a, b) => a + b;
const anotherAdd = (a, b) => { return a + b; };

That code equal. The difference is that the first one doesn't need return keyword since it is not using curly brackets.