Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: how to access assigned props from parent or other elements #78

Open
mx781 opened this issue Apr 17, 2017 · 0 comments
Open

Question: how to access assigned props from parent or other elements #78

mx781 opened this issue Apr 17, 2017 · 0 comments

Comments

@mx781
Copy link

mx781 commented Apr 17, 2017

First of, thanks for creating this -- seems a very promising tool for complex, responsive layouts.

I am trying to access the assigned props to components from a parent, but can't seem to find where in the Component Object they are stored, or what to call to retrieve them.

Consider this example:

import React, { Component } from 'react';
import componentQueries from 'react-component-queries';

class Expander extends Component {
  constructor(props) {
    super(props);
    this.state = { text: props.text };
    this.interval = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.setState({
      text: this.state.text += " is foo"
    });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <button>
        {this.state.text}
        ({this.props.widthOver100 ? "LARGE" : "small"})
      </button>
    );
  }
}

const AwareExpander = componentQueries(
  ({ width }) => ({ widthOver100: width > 100 })
)(Expander);

class Container extends Component
{
  render()
  {
    console.log(this.props.children)
    return (
      <div>{this.props.children}</div>
    )
  }
}

export class App extends Component {
  render() {
    return (
      <Container>
        <AwareExpander text="bar" />
      </Container>
    );
  }
}

(apologies for lack of live example -- I tried putting it into WebpackBin, but couldn't get it to work)

Is there a way to access the newly set props (or even just width/height) of a child (AwareExpander) from a parent component, in this case Container, preferably in the render() method?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant