How to pass data with server-side rendering to React-component from Node

Question

I'm trying to pass some data to my components. I found this example: http://www.tech-dojo.org/#!/articles/56b1af3e8ff769fc29f96ae8 I have created a class DataWrapper which looks like in the example:

import React, { Component } from 'react'

export default class DataWrapper extends Component {

  constructor(props) {
    super(props)
  }

  getChildContext () {
    return {
      data: this.props.data
    };
  }

  render () {
    return this.props.children;
  }
}

DataWrapper.childContextTypes = {
  data: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.string
  ]).isRequired
};

Node-server:

app.get('*', (req, res) => {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
      ...
      const body = renderToString(
        <MuiThemeProvider muiTheme={theme}>
          <DataWrapper data={'somedata'}>
            <RouterContext {...renderProps} />
          </DataWrapper>
        </MuiThemeProvider>
      )
      res.render('index', { title, body })

And my component where I want to use the data looks like this:

export default class Template extends Component {

  constructor(props, context) {
    super(props, context)
    console.log("Template context", context.data);
    ...

context.data is always undefined. What am I missing? Is there an other way to do this?

xiaofan2406 · Accepted Answer · 2016-11-13 23:19:50Z

1

If contextTypes is not defined, then context will be an empty object., quoting directly from React Docs. https://facebook.github.io/react/docs/context.html#how-to-use-context

You will need to add

Template.contextTypes = {
    data: // whatever type it is
}

answered Nov 13, 2016 at 23:19

xiaofan2406

3,3105 gold badges29 silver badges36 bronze badges

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

1 Comment

krillov Over a year ago

Thanks! I've missed it.

Collectives™ on Stack Overflow

How to pass data with server-side rendering to React-component from Node

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related