Using a function to return a prop is not returning the prop

Question

I'm trying to define a prop on a react component using a method. The method is working fine and I can return a correct result to the console. However when I inspect my component with react browser extension I can see no props are assigned to the component, nor can I use them within the component.

class NowPlaying extends Component {

state = {
    genres: []
};

componentDidMount() {
    // Fetch Genre Data
    axios.get(`${base_url}genre/movie/list?api_key=${api_key}`)
        .then(res => this.setState({ genres: res.data.genres }))
}

getGenreTitles = (genreIds, genres) => {
    genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    })
};

render() {
    return this.props.movies.map((movie) => (
       <MovieItem
           key={movie.id}
           movie={movie}
           genres={this.getGenreTitles(movie.genre_ids, this.state.genres)}
       />
    ));
}
}

Expectation is that the name is returned as a prop which can then be used in the movieitem component.

David · Accepted Answer · 2019-01-28 12:25:33Z

2

getGenreTitles doesn't return anything. (By contrast, note how the function you pass to map() has a return statement.) Either remove the curly braces from the function declaration to take advantage of the default return for arrow functions:

getGenreTitles = (genreIds, genres) =>
    genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    });

or add a return statement to the function body:

getGenreTitles = (genreIds, genres) => {
    return genreIds.map(genreId => {
        const filteredGenres = genres.filter(genre => genre.id === genreId);
        const { name } = filteredGenres[0];
        return name;
    });
}

answered Jan 28, 2019 at 12:25

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a function to return a prop is not returning the prop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related