async data in react-redux child component

Question

i just started using react/redux and im facing a problem with async data handling, here i have the parent component (App) that im calling the action creator in to get the data and then passing it to the child component (VideoList)

    `class App extends React.Component {
       componentDidMount() {
           this.onFormSubmit()
       }

       state = { selectedVideo: null }

       onVideoClick = (video) => {
           this.setState({selectedVideo: video});
       };

       onFormSubmit = (term) => {
           this.props.fetchList(term)
       }
       render() {
           return (
               <div>
                   <Header/>
                   <div  className="container">
                       <VideoDetail video={this.state.selectedVideo}/>
                       <VideoList videos={this.props.videos}/>
                   </div>
               </div>
           )
       } }

   const mapStateToProps = state => {
       return {videos: state.videos} }

   export default connect(mapStateToProps,{fetchList})(App)

    `

now at the child component im trying to map over the videos array but it keeps telling me that map is not a function, i know that's because the data has not yet come from the youtube api so how can i solve this issue?

note: the app was perfectly functional before trying to setup redux

    class VideoList extends React.Component {
    renderList() {
        this.props.videos.map(video => {
            return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
        });
    };
    render() {
        console.log(this.props.videos);
        return (
            <div> 
                {this.renderList()}
            </div>
        )
    }
}

Well, not rendering VideoList if the video list hasn't loaded yet would be a solution. — apokryfos
– apokryfos, Commented Jan 31, 2019 at 16:59

KT-mongo · Accepted Answer · 2019-01-31 23:37:47Z

1

Set your videos in your reducer as an empty array. Then try this:

class VideoList extends React.Component {
    render() {
        if (this.props.videos.length === 0){
            return <div>Loading...</div>
        }
        return (
            <div> 
              {this.props.videos.map(video => {
                return <VideoItem
                         video={video}
                         onVideoClick={this.onVideoClick}
                         key={video.id.videoId}
                       />
              }}
            </div>
        )
    }
}

answered Jan 31, 2019 at 23:37

KT-mongo

2,2125 gold badges20 silver badges31 bronze badges

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

Comments

Cat_Enthusiast · Accepted Answer · 2019-01-31 17:04:35Z

0

As you mentioned, you're getting this error because you're trying to map over a list that does not contain any data. You can write some extra logic that says "only execute if the list contains data."

renderList() {
    if(this.props.videos){
       this.props.videos.map(video => {
          return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
       });

    }
};

answered Jan 31, 2019 at 17:04

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

3 Comments

Islam G. Abdelkader Over a year ago

if(this.props.videos.length) actually removed the error but now when i enter the search term it causes the app to completely refresh and nothing gets rendered

Cat_Enthusiast Over a year ago

That likely has to do with your setup in the SearchTerm component itself. You can share that code with us and we can deduce what's wrong. More than likely has to do with how you setup your action creators to be dispatched when typing into search box.

Islam G. Abdelkader Over a year ago

thank you very much , that solved the problem , the not rendering issue was cuz i didnt wrap the return statement with () lol

cesarcosta99 · Accepted Answer · 2019-01-31 17:06:51Z

0

That's probably because videos coming from the reducer is not an array, you just need to set its initial state to []. I'd comment this but I still can't.

answered Jan 31, 2019 at 17:06

cesarcosta99

111 silver badge4 bronze badges

2 Comments

Islam G. Abdelkader Over a year ago

it is set to [] already, in fact i get the empty array console logged before the error.

cesarcosta99 Over a year ago

So, the first problem is you are not returning the map to be rendered: return this.props.videos.map(...). The second possible problem is that the function renderList is not binded, to do that just call it like this: {this.renderList.bind(this)}.

Collectives™ on Stack Overflow

async data in react-redux child component

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related