CODEWITHSUNDEEP
javascriptreactjsreturn
SteveRoss
SteveRoss

Reputation: 105

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

EDIT: [SOLVED by the community - in the answers!] Thanks everyone

I'm trying to add search functionalities to my webApp (a list of the movies I own). To do this, from the app I'm calling a functional component (MovieListFiltered) which has the following code:

MovieListFiltered.js:

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) =>
        {
            return(
                <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                    <div className="card">
                        <div className="card-image waves-effect waves-block waves-light">
                            <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                            <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                        </div>
                        <div className="card-action">
                            <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                        </div>
                    </div>
                </div>
            );
        })
        console.log(newMovies)
        props.movieCallback(newData, newMovies);
    } else {
        return null
    }
}

export default MovieListFiltered

So, basically, notything special there: you see many console.log calls, that was just to make sure the correct array of data was passed (and it is!)

In App.js:

... code not interesting goes here ...

  callbackFromList = (childDataData, childDataMovies) => {
    this.setState({moviesToFilter: childDataData});
    this.setState({moviesToShow: childDataMovies});
    this.setState({totalResults: childDataData.length});

  }



render()
{
... some not interesting code goes here...

      return(
<div className="App">
    <Nav />
    <div>
        <div className="container">
            <div className="row">
                <div className="col s10 offset-s1">
                    <MovieListFiltered viewMovieInfo={this.viewMovieInfo} movieCallback={() => this.callbackFromList} ref={this.movieListRef} moviesAfterFilter={this.state.moviesFiltered}></MovieListFiltered>
                </div>
            </div>
        </div>
    </div>
</div>
      );

}

Can you please help me? I've read all the questions already made here on stackoverflow, but nothing seems to fit to my case.

Upvotes: 0

Views: 1338

Answers (3)

Tom O.
Tom O.

Reputation: 5941

You are only returning a value from the else block. The if block is not currently returning anything. You probably want to make the last line of the if block return newMovies;

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) =>
        {
            return(
                <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                    <div className="card">
                        <div className="card-image waves-effect waves-block waves-light">
                            <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                            <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                        </div>
                        <div className="card-action">
                            <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                        </div>
                    </div>
                </div>
            );
        });
        console.log(newMovies);
        props.movieCallback(newData, newMovies);

        return newMovies;
    }

    return null;

}

export default MovieListFiltered

Also, you might notice I got rid of the entire else block - this is because it's not necessary if you return from the corresponding if block.

Upvotes: 1

justin
justin

Reputation: 302

I think you are wanting something like this: 

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter
    if(newData !== null) {
        const newMovies = newData.map((movie, i) => (                            
            <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
                <div className="card">
                    <div className="card-image waves-effect waves-block waves-light">
                        <img src={movie.url2poster} alt={movie.movieTitle} 
                        className="responsive-img" />
                        <p className="littleFont" align="center"><span><b> 
                       {movie.movieTitle}</b></span></p>
                    </div>
                    <div className="card-action">
                        <a href="#" onClick={() => 
                       this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                    </div>
                </div>
            </div>
            );
        )            
        console.log(newMovies)
        props.movieCallback(newData, newMovies)
        return newMovies
    } else {
        return null
    }
}

Upvotes: 2

Thomas Gak-Deluen
Thomas Gak-Deluen

Reputation: 2941

Here a cleaner version with only one return. That may not be what you're looking for though.

import React from 'react'

const MovieListFiltered = (props) => {
    const newData = props.moviesAfterFilter || []; // add 'or' if null or undefined
    const newMovies = newData.map((movie, i) => (
        <div className="col s12 m3 l3" key={i} movieid ={movie.idFromTmdb}>
            <div className="card">
                <div className="card-image waves-effect waves-block waves-light">
                    <img src={movie.url2poster} alt={movie.movieTitle} className="responsive-img" />
                    <p className="littleFont" align="center"><span><b>{movie.movieTitle}</b></span></p>
                </div>
                <div className="card-action">
                    <a href="#" onClick={() => this.props.viewMovieInfo(movie.idFromTmdb)}>Movie Details</a>
                </div>
            </div>
        </div>
    ));
    console.log(newMovies)
    props.movieCallback(newData, newMovies);

    return newMovies;
}

export default MovieListFiltered

Upvotes: 1

Related Questions