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

Question

I am new to react-native and I am having a hard loading the app . Everything was working while I was working with data directly imported from a JSON file then I decided to implement it dynamically using json-server module and also make use of redux, but as soon as I launch the app I get this error message .

I made a couple of searches and it apparently is related to ES6 syntax . For instance , I had a look at this guy answer : Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

I am not using any arrow functions in the render method . I have no clue what else could be the problem . Any help would be appreciated .

[![import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { Card } from 'react-native-elements';
import { ListItem} from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../../shared/baseUrl';

const mapStateToProps = (state) => {
    return {
       dishes: state.dishes,
       comments: state.comments,
       promotions: state.promotions,
       leaders: state.leaders
  }
 }

 function RenderItem(props){
     const item = props.item;

     if(item != null){
       return(
         <Card
            featuredTitle={item.name}
            featuredSubtitle={item.designation}
            image={{ uri: baseUrl + item.image }}>
            <Text style={{ margin: 10 }}>
                {item.description}
            </Text>
         </Card>
       )
    }
  }

  class HomeScreen extends Component {

     static navigationOptions = {
        title: 'Accueil'
     } 


render() {
    return (
        <ScrollView>
            <RenderItem item={this.props.dishes.dishes.filter((dish) => dish.featured)\[0\]} />
            <RenderItem item={this.props.promotions.promotions.filter((promo) => promo.featured)\[0\]} />
            <RenderItem item={this.props.leaders.leaders.filter((leader) => leader.featured)\[0\]} />
        </ScrollView>
    );
}
  }

    export default connect(mapStateToProps)(HomeScreen);

  export const baseUrl = 'http://<ip-address>:3001';

can you share how you exporting `baseUrl` – Ziyo Feb 11 '19 at 01:13 — Ziyo, Feb 11 '19 at 01:13
@Ziyo . I updated the content of the question – Godfather Feb 11 '19 at 01:48 — Godfather, Feb 11 '19 at 01:48

score 1 · Accepted Answer · answered Feb 11 '19 at 01:14

It appears your renderItem isn't returning data and you don't have any logic to account for it. You're also not defining item. Try this...

function RenderItem(props) {

  const item = props.item;
  if (item != null) {
        return(
            <Card
                featuredTitle={item.name}
                featuredSubtitle={item.designation}
                image={{uri: baseUrl + item.image}}>
                <Text
                    style={{margin: 10}}>
                    {item.description}</Text>
            </Card>
        );
    }
    else {
        return(<View></View>);
    }
}

It turns out to be right . It worked after I included the else statement . Thanks mate — Godfather, Feb 11 '19 at 01:59

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

1 Answers1