How can I render a React component from within a function?

plumb_pete

Is there some way to make the following to work? I want to pass "welcome" to the onClick event for example and it should render a component with that name to specified DIV. I would like it to be dynamically named, but I can settle for switch(index) :) var Menu = React.createClass({ getInitialState: function() { return {data: []}; }, componentDidMount: function() { // do something }, menuClick: function(index) { render( <{index} />,...

Originally asked by Kokesh on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

You can use the state of the component to do this var Menu = React.createClass({ getInitialState: function() { return { data: [], message: null }; }, componentDidMount: function() { // do something }, menuClick: function(index) { this.setState({ message: index }); }, getText: function() { if (this.state.message) { return ( <h1>{this.state.message}</h1> ); } return null; } render: function() { return ( <div> <span> <span className="menuLink" onClick={this.menuClick.bind(this, "welcome")}>Home</span>  <span className="menuLink" onClick={this.menuClick.bind(this, "management")} >Generator Management</span>  <span className="menuLink" onClick={this.menuClick.bind(this, "about")}>About...

Full answer by andykenward: https://stackoverflow.stackexchange.com/a/31206148 (CC BY-SA 4.0).

Need it done for your business? UphillTech.