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

Question

My React app return this error :

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

I've checked every line of my code but i can't figure what's going on..

Here is the module that create this error :

import React from 'react'
import Query from '../../components/Query'
import ArticleCard from '../ArticleCard'
import ARTICLES_QUERY from '../../queries/article/articles'

export default function CardContainer() {
    return (
        <div className="wrapper">
            <Query query={ARTICLES_QUERY}>
                {({ data : { articles } }) => {
                    {articles.map((article) => {
                        return (
                            <ArticleCard article={article} key={`article__${article.id}`} />
                        )
                    })}
                }}
            </Query>
        </div>
    )
}

The CardContainer module must return another component :

import React from 'react'
//import {Link} from 'react-router-dom'

export default function CardContainer({article}) {
    return (
        <div className="arcticle_card">
            <div className="article_card_content">
                <div className="article_card_image">
                    <img src={process.env.REACT_APP_BACKEND_URL + article.image.url} alt={article.image.url}></img>
                </div>
                <div className="article_card_text">
                    <p className="categorie">{article.category.name}</p>
                    <h2>{article.title}</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div className="article_card_underline"></div>
        </div>
    )
}

And finally here is my Query module, the error seams to be comming from here but I don't know why :

import React from 'react'
import {useQuery} from '@apollo/react-hooks'

const Query = ({ children, query, id }) => {
    const { data, loading, error } = useQuery(query, {
        variables: { id: parseInt(id) }
    })

    if (loading) return (
        <p>Loading ...</p>
    )
    if (error) return (
        <p>Error: {JSON.stringify(error)}</p>
    )
    return children({ data })
}

export default Query

Thank you for your help :)

Théo Vogel Théo Vogel · Accepted Answer · 2020-04-19T17:49:09

Ok so, i find the solution by myself. I post the solution here because it may help someone.

Inside of my cardContainer module something was missing : You must wrap :

{articles.map((article) => {
   return (
        <ArticleCard article={article} key={`article__${article.id}`} />
   )
})}

with a return()

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

1 Answers