on select render different form reactjs

Question

I am developing an app using react js. currently stuck at how to load different forms onchange event of select.

    var Eventoption = React.createClass({
        getInitialState: function() {
             return {
                 value: 'A'
             }
         },
        change:function(event){
            this.setState({value: event.target.value});

        },
        render : function(){
            return <div className="form-group">
                            <select onChange={this.change} value={this.state.value} className="form-control">
                            <option value="A">Event1</option>
                            <option value="V">Event2</option>
                            <option value="S">Event3</option>
                            </select>
                            <p></p>
                   <p>{this.state.value}</p>
                          </div>
        }
       });

So on select on event2 i want to load different form Which say i have saved it in event2.js

eg

    var Event2Form = React.createClass({

        render:function() {
            return 
                    <h3><u>Add Event</u></h3>
                    <form action="index.php" method="post" id="event2Form">
                      <div className="form-group">
                        <label for="exampleEventId">Event Id</label>
                        <input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id"  />
                      </div>
                      <div className="form-group">
                        <label for="exampleEventName">Event Name</label>
                        <input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" />
                      </div>

                    </form>
                </div>;
        }
    });

    window.Event2Form = Event2Form;

Let me know, how it can be achieved or any other better approach is there other than current one.

Answer 1

One of the easiest way.

var Eventoption = React.createClass({
    getInitialState: function() {
         return {
             value: 'A'
         }
     },
    change:function(event){
        this.setState({value: event.target.value});

        },
        render : function(){
           var formCmp;
           if (this.state.value === 'A')
              formCmp = <Event1Form />
           else if (this.state.value === 'V')
               formCmp = <Event2Form />

            return (
                 <div className="form-group">
                            <select onChange={this.change} value={this.state.value} className="form-control">
                            <option value="A">Event1</option>
                            <option value="V">Event2</option>
                            <option value="S">Event3</option>
                            </select>
                            <p></p>
                      <p>{this.state.value}</p>
                     {formCmp}
                </div>
            );
        }
 });

 var Event2Form = React.createClass({

    render:function() {
        return 
                <h3><u>Add Event</u></h3>
                <form action="index.php" method="post" id="event2Form">
                  <div className="form-group">
                    <label for="exampleEventId">Event Id</label>
                    <input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id"  />
                  </div>
                  <div className="form-group">
                    <label for="exampleEventName">Event Name</label>
                    <input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" />
                  </div>

                </form>
            </div>;
    }
});