React native component gets props undefined

Question

I'm making a movie-app with react-native and expo. In my components TVContainer.js passes props to TVPresenter.js and TVPresenter.js displays data in the app.

However, the props passed to TVPresenter.js are 'undefined' like this:

Warning: Failed prop type: The prop loading is marked as required in TVPresenter , but its value is undefined .

I tried removing .expo folder and restart again and it shows same error.

Here is TVContainer.js

//TVContainer.js
import React from "react";
import { tv } from "../../api";
import TVPresenter from "./TVPresenter";


export default class extends React.Component {
    state = {
        loading: true,
        popular: null,
        topRated: null,
        airingToday: null
    };

    logFunction = () => {
        console.log('TVContainer시발');
    };

    async componentDidMount() {
        let popular, topRated, airingToday, error;
        console.log('componentDidMount');
        this.logFunction();
        try {
            ({
                data: { results: popular }
            } = await tv.getPopular());
            ({
                data: { results: topRated }
            } = await tv.getTopRated());
            ({
                data: { results: airingToday }
            } = await tv.getAiringToday());
            console.log('ComponentDidMount try중..')
        } catch (error) {
            console.log(error);
            error = "Can't get TV";
        } finally {
            this.setState({
                loading: false,
                error,
                popular,
                topRated,
                airingToday
            });
            this.logFunction();
        }
    }

    render() {
        const { loading, popular, topRated, airingToday } = this.state;
        console.log('!!!!!!');
        return (
            <TVPresenter
                loading={true}
                airingToday={this.state.airingToday}
                topRated={this.state.topRated}
                popular={this.state.popular}
            />
        );
    }
}

TVPresenter.js

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import Loader from "../../components/Loader";
import MovieItem from "../../components/MovieItem";
import Section from "../../components/Section";
import { BG_COLOR } from "../../constants/Colors";

const Container = styled.ScrollView`
  background-color: ${BG_COLOR};
`;

const TVPresenter = ({ loading, popular, airingThisWeek, airingToday }) =>
    (loading ? (
        <Loader />
    ) : (
        <Container>
            {airingToday ? (
                <Section title="Airing Today">
                    {airingToday
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                key={tv.id}
                                id={tv.id}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
            {airingThisWeek ? (
                <Section title="Airing this Week">
                    {airingThisWeek
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                key={tv.id}
                                id={tv.id}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
            {popular ? (
                <Section title="Popular" horizontal={false}>
                    {popular
                        .filter(tv => tv.poster_path !== null)
                        .map(tv => (
                            <MovieItem
                                isMovie={false}
                                horizontal={true}
                                key={tv.id}
                                id={tv.id}
                                overview={tv.overview}
                                posterPhoto={tv.poster_path}
                                title={tv.name}
                                voteAvg={tv.vote_average}
                            />
                        ))}
                </Section>
            ) : null}
        </Container>
    )
    );

TVPresenter.propTypes = {
    loading: PropTypes.bool.isRequired,
    popular: PropTypes.array,
    airingThisWeek: PropTypes.array,
    airingToday: PropTypes.array
};

export default TVPresenter;

If it works well:

At first, loading is true. So TVPresenter shows Loader. After componentDidMount in TVContainer.js, it updates state with data(loading = false). And TVPresenter.js shows data.

However, I got this message:

Warning: Failed prop type: The prop loading is marked as required in TVPresenter , but its value is undefined .

So I think passing props are not properly working.

Plus, because console.log in ComponentDidMount in TVContainer.js doesn't work, I wonder ComponentDidMount is working properly too.

Thank you so much guys!!

Answer 1

Try to change the component :

  <TVPresenter
                loading={loading}
                airingToday={this.state.airingToday}
                topRated={this.state.topRated}
                popular={this.state.popular}
            />

Answer 2

Going quickly through your code I noticed a weird thing:

export default class extends React.Component {
state = {
    loading: true,
    popular: null,
    topRated: null,
    airingToday: null
};

In this piece of your code no name is given to the export . Why is that?