score:0

Accepted answer

i think what you need here is a component to play the middle man. you can make this middle man component a container component that holds and manipulates your state and then your other two components that you already have become stateless components. like this:

var componentone = react.createclass({
  render: function() {
    return (
      <div>
        <a href="#" classname="component-one" onclick={this.props.clickhandler}>(show full)</a>
      </div>
    );
  }
});

var componenttwo = react.createclass({
  style: function() {
    return (this.props.showexample) ? {display: "inline"} : {display: "none"}
  },
  render: function() {
    return (
      <div classname="component-two" style={this.style()}>example</div>
    );
  }
});

var controller = react.createclass({
  getinitialstate: function() {
    return {property: false};
  },
  handlesearch: function() {
    this.setstate({property: !this.state.property});
  },
  render: function() {
    return (
      <div>
        <componentone clickhandler={this.handlesearch} />
        <componenttwo showexample={this.state.property}/>
      </div>
    );
  }
})

var app = react.createclass({
  render: function() {
    return (
      <div>
        <controller />
      </div>
    );
  }
});

reactdom.render(<app />, document.getelementbyid('content'))

by the way, i thought i should mention, doing it this way you could potentially make it so that in the controller component you conditionally render componenttwo rather than using the style to hide it. i didn't want to change the styling functionality in case there was a specific reason you were doing but if there isn't then i'd say just only render component2 if you need it.

here is a fiddle of this working: http://jsfiddle.net/ozrevulsion/4rh31tou/

good luck!


Related Query

More Query from same tag