React createContainer: Not able to access data in props

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?

Perhaps you can just get the one item?

Videos.findOne(videoId);

Then you don’t need to iterate over anything.

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

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

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().

I’m sorry. I fixed the blank screen.

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

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

1 Like

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.

3 Likes

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!

1 Like