ReactJS: Access context from base component

Question

I'm trying to create a base component that can handle UI themes. The theme is passed to components via context, but the base component that I've created is not receiving the context.

class DetailView extends ThemedComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Detail View</div>;
  }
}

export default DetailView;

class ThemedComponent extends Component {
  constructor(props, context) {
    super(props);
    // context here is undefined
  }
}

ThemedComponent.contextTypes = {
  theme: PropTypes.object,
};

export default ThemedComponent;

I can get the context from DetailView if it extends Component directly and all that works fine. However, when I try to get the context within ThemedComponent it is always undefined.

What's the right way to create a common base component that can perform operations using the components context?

you have a typo: render { instead of render () {

hex13
– hex13

2015-11-10 21:38:54 +00:00
Commented Nov 10, 2015 at 21:38 — hex13
– hex13, Commented Nov 10, 2015 at 21:38

hex13 · Accepted Answer · 2015-11-10 21:51:36Z

1

You have to pass context to super in DetailView:

class DetailView extends ThemedComponent {
     constructor(props, context) {
          super(props, context);
     }
     .........
}

edited Nov 10, 2015 at 21:51

answered Nov 10, 2015 at 21:45

hex13

5205 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: Access context from base component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related