0

Here, i have two components. One is ComponentOne and another one ComponentTwo. Currently i'm rendering only one component that is ComponentTwo.

var ComponentOne = React.createClass({
    render: function() {
        <div className="card">
            <h2>Component one</h2>
        </div>
    }
});
var ComponentTwo = React.createClass({
    render: function() {
        <div className="card">
            <h2>Component two</h2>
            <button>Insert</button>
        </div>
        <ComponentOne />
    }
});

If i click Insert button ComponentOne will insert after componenttwo class element card. How to achieve this one with reactjs?

Sathya
  • 1,704
  • 3
  • 36
  • 58
  • 2
    how about this .. Add a property on component2 as "c1Hidden" initially set to true . add a onClick event on the button and a method that would change the chHidden to false when the button is clicked. On – Praveen Oct 16 '15 at 06:46
  • 1
    For example see this ... http://stackoverflow.com/questions/29913387/show-hide-components-in-reactjs – Praveen Oct 16 '15 at 06:48
  • @Sathya, did my answer help? Please accept it, if it did. – Bhargav Ponnapalli Oct 17 '15 at 03:47

1 Answers1

2

Change ComponentTwo to this.

var ComponentTwo = React.createClass({
getInitialState: function(){
   return {"insert":false};
},
handleClick : function(){
    this.setState({"insert":true});
},
render: function() {
    var view;
    if(this.state.insert)          {
      view = <ComponentOne />;
    }

    return <div className="card">
        <h2>Component Two</h2>
        <button onClick={this.handleClick} >INsert </button>
        {view}    
    </div>
}
});
Bhargav Ponnapalli
  • 9,224
  • 7
  • 36
  • 45
  • 1
    why do you make `view =
    ` wouldn't `view = null` be enough, or simply leave it undefined?     – Icepickle Oct 16 '15 at 06:55
  • I have habit of initializing views with div/span because in some occassions I return "view" in the render method, and returning null causes an error. Not needed here though. Thanks! – Bhargav Ponnapalli Oct 16 '15 at 07:02