CODEWITHSUNDEEP
reactjsreact-nativerender
Afnan Zai
Afnan Zai

Reputation: 1

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

I don't know where is problem. I am unable to resolve this error

   import { View, Text, text, TextInput, password, Image, } from 'react-native';
   import React, { useEffect, useState, Component } from 'react';
   import { FontAwesome } from '@expo/vector-icons';
   import { AntDesign } from '@expo/vector-icons';
   import { Container, Header, Content, ListItem, CheckBox, Button, Body, Grid } from 'native-base';
   import Mycard from './Mycard'
   import { getMatches } from './Api';


   export default function Home() {

     //code

     const [matches, setmatches] = useState([]);

     useEffect(() => {
         getMatches()
           .then((data) => {
             setmatches(data.matches);
             console.log(data.matches);
           })
           .catch((error) => alert("could not load data"));
       }, []

     );

     // where is the problem ?


     return (
      <View style={{ flex: 1,}}>
        <Grid Container>
          <Grid></Grid>
           <Grid>
             {
               matches.map((match)=>
               (<Mycard match="match" />)
              )
              }
           </Grid>
        </Grid>
    </View>
     )
   }

Nothing was returned from render. This is usually means a return statement is missing. What seems to be the error here?

Upvotes: 0

Views: 69

Answers (1)

CapBul
CapBul

Reputation: 55

React doesn't like when we loop over components without assigning them a key. You should probably add a key property to the Mycard element:

<Grid>
{
  matches.map((match, index)=> (<Mycard key={index} match={match} />))
}
</Grid>

Upvotes: 2

Related Questions