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

Question

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.

Answer 1

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
    }
}