React createContainer: Not able to access data in props


#1

I’ve found the document I need by passing the id to find().fetch(), which returns an array (how come I can’t use .findOne()?):

This shows up as I would expect when I inspect the props of the specific component:

But now I get stuck. Because I can’t figure out how to pull the data from props and into the render function of my component. This is a component only showing one video, so I don’t want to iterate over the array (containing only one object), which works just fine.

What is the proper way to do this?


#2

Perhaps you can just get the one item?

Videos.findOne(videoId);

Then you don’t need to iterate over anything.


#3

I won’t let me return the object (/inject into the properties of the component) when using .findOne().


#4

It definitely will. what do you mean by “won’t let me”?


#5

Now I just get a blank screen and my react dev tools says: “Waiting for roots to load”.

And I’m sorry if my english is broken. I just meant that I didn’t get a response using findOne().


#6

I’m sorry. I fixed the blank screen.

But now it doesn’t return anything in the components properties.


#7

Did you subscribe to the video data so that it is loaded on the client? https://guide.meteor.com/data-loading.html


#8

I don’t see a subscribe anywhere. Are you sure you’ve already subscribed to the videos collection and the data is ready? Consider doing this:

export default VideoContainer = createContainer(({ params }) => {
  const { videoId } = params;
  const handle = Meteor.subscribe('videos');

  return {
    isDataReady: handle.ready(),
    videoItem: Videos.findOne(videoId),
  }
}, Video)

Then in the Video component, you check this.props.isDataReady to make sure the data is ready first. If it is, then you can access this.props.videoItem.


#9

I didn’t remove autopublish to make sure the problem wasn’t there. But I’ll try the handle.ready() method.

I really appreciate your help guys!