How to call another component from onClick function in ReactJS

Question

I am learning Reactjs. I implemented one application for testing with rails. I have a search in lots to find a solution, but I did not find it. I wanted to call another component from the onClick function. But nothing happens. Is it possible what I'm trying to achieve? If yes, then please indicate to me where I am mistaken, and if not, in what way I can implement. Here is my code:

 var Comment = React.createClass({ render: function () { return ( <div id={"comment_"+ this.props.id }> <h4>{ this.props.author } said:</h4> <p>{ this.props.desc }</p> <a href='' onClick={this.handleDelete}>Delete</a> | #this is for delete which works great <a href='' onClick={this.handleEdit}>Edit</a> # If I put here then it works fine <UpdateComments comments={ this.props} /> but I don't want it here </div> ) }, handleDelete: function(event) { $.ajax({ url: '/comments/'+ this.props.id, type: "DELETE", dataType: "json", success: function (data) { this.setState({ comments: data }); }.bind(this) }); }, handleEdit: function(event) { var Temp = React.createClass({ render: function(event){ return(<div> <UpdateComments comments={ this.props} /> #here I want to call UpdateComments component </div> ) } }); } }); 

Update: If I try the trick below, then it calls the component, but reloads the page and the called component disappears again :(

  handleEdit: function() { React.render(<UpdateComments comments={ this.props} /> , document.getElementById('comment_'+ this.props.id)); } 

Any other details if you need, feel free to ask. Thank you in advance.:)

Answer 1

Maybe this fiddle can tell you the right way

 var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name} <First1/> <First2/> </div>; } }); var First1 = React.createClass({ myClick: function(){ alert('Show 1'); changeFirst(); }, render: function() { return <a onClick={this.myClick}> Saludo</a>; } }); var First2 = React.createClass({ getInitialState: function(){ return {myState: ''}; }, componentDidMount: function() { var me = this; window.changeFirst = function() { me.setState({'myState': 'Hey!!!'}) } }, componentWillUnmount: function() { window.changeFirst = null; }, render: function() { return <span> Saludo {this.state.myState}</span>; } }); React.render(<Hello name="World" />, document.getElementById('container')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> <script src="https://facebook.imtqy.com/react/js/jsfiddle-integration.js"></script> <div id="container"> <!-- This element contents will be replaced with your component. --> </div> 

I mainly use these links:

communication between components

dom event listeners

He hopes this will help.

In addition, you can use the container component and use it as a bridge between both components.