Display single item in Meteor + Flowrouter + React

help
1

Am a little bit stuck with Meteor, Flowrouter and React when it comes to display single items. Have been trying several solutions but would need a push in the right direction to help understand how to do this correctly. It would be very appreciated

Did post this question earlier today on Stackoverflow
[http://stackoverflow.com/questions/33102838/display-single-item-in-meteor-flowrouter-react][1]

But have not got any answer so will put it out here also, because it’s something that is important for me to understand.

My route looks like this

FlowRouter.route('/video/:_id', {
    name: "video",
    action(pathParams, queryParams) {
        console.log("Got the postId from the URL:", pathParams._id);
        console.log("Query parameters:", queryParams);
        ReactLayout.render(App, {
            content: <Play />
    });
}
});

So this help me get the ID and then in my Play React Class i have this code

Play = React.createClass({
  renderPlay() {
    return Videos.findOne(FlowRouter.getParam("_id"));
  }, 
  render() {
    return (
      <div className="container">
      {this.renderPlay()}
      </div>
    );
  }
});

But what i really would like to do is to pass the information to my React Clip class and also put values in variables.

Clip = React.createClass({
  getDefaultProps: function () {
    return {
      src : 'https://www.youtube.com/embed/',
      width: 1600,
      height: 900
    }
  },
  propTypes: {
    video: React.PropTypes.object.isRequired
  },
  render() {
    return (

      <iframe
      src={this.props.src + this.props.video.videoId} frameBorder={ 0 }>
      </iframe>
    );
  }
});

To do this i would need to include something like this in my Play class.

  renderVideo() {
    // Get tasks from this.data.tasks
    return this.data.videos.map((video) => {
        return <Clip key={video._id} video={video} />;
    });
  },

Would love to understand how to do this correctly and it would really be a big step in the right direction to to understand this stack.

Tutorials and guides covering Meteor + React + kadira:Flowrouter + kadira:ReactLayout that handle more than just single page apps are welcome.

2

I would start by reading through the React+Meteor tutorial. From what it appears that you want to do, you just need to hook in your data correctly so it is passed to your React component. This link will take about 45 to read through:

http://react-in-meteor.readthedocs.org/en/latest/

3

This is just my view:

  1. You may forgot subscribe your single data
  2. You used data wrong way
// Play component should be 

Play = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        const videoId = FlowRouter.getParam("_id");
        const isReady = Meteor.subscribe('video', videoId).ready();
        return {
            isReady: isReady,
            videoId: videoId,
            video: Videos.findOne(videoId)
        };
    },

    render() {
        let content = null;
        if(!this.data.isReady) {
            content = <h3>Loading...</h3>;
        } else {
            if(!this.data.video) {
                content = <h3>Video not found</h3>;
            } else {
                content = <Clip video={this.data.video} />;
            }

        }
        return (
            <div className="container">
                {content}
            </div>
        );
    }
});

Just my opinion, maybe misunderstand your means