Full-Stack React Projects - Second Edition

Passing data props to PlayMedia from MainRouter

While generating markup with ReactDOMServer.renderToString, we pass the preloaded data to MainRouter as a prop. We can access this data prop in the MainRouter component definition, as follows:

mern-mediastream/client/MainRouter.js

const MainRouter = ({data}) => { ... }

To give PlayMedia access to this data from the MainRouter, we will change the Route component added originally to declare the route for PlayMedia, and pass this data as a prop, as shown in the following code:

mern-mediastream/client/MainRouter.js

<Route path="/media/:mediaId"        render={(props) => (                <PlayMedia {...props} data={data} />              )} />

The data prop sent to PlayMedia will need to be rendered in the view, as discussed next. ...