ReactJs submitting form data to the screen

Question

I want a way to submit a form in ReactJs to the browser.

var ToDoForm = React.createClass({

    getInitialState: function() {
      return {text: ''};
    },
    handleChange: function(event) {
      this.setState({text: event.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      return (

            <h2> hey </h2>
      )
    },

    render: function() {
      return (
          <div>
            <h1> todos </h1>

            <form className="todoForm" onSubmit={this.handleSubmit}>
              <input
                  type="text"
                  placeholder="Type out a task"
                  value={this.state.text}
                  onChange={this.handleChange}
                  />
              <input
                  type="submit"
                  value="Submit todo"
                  />
            </form>
          </div>
      );
    }

  });

I have a function handleSubmit that I want when the form is submitted to just print the word hey in the browser as a heading2. I know this is not very wise or makes any sense but I just want to see it working and then I'll it to return something that makes more sense. So far when I click on the submit button, nothing happens. any solutions?

also worth adding, this question ( Get form data in Reactjs ). I want what this guy is basically doing but instead of console.logs an actual print to screen, just to clarify if I have been unclear

Answer 1

Use a state to handle it ? Something like

        getInitialState: function(){

        return{

        submitted: false
        },

        handleSubmit: function(e){
            e.preventDefault();
        this.setState({  subbmitted: true});

        },



       render: function(){

           return (

               <div>
                    <h1> todos </h1>
                   {!!this.state.submitted ?
                  <div>
                     <h2> {'Hey'} </h2>
                 </div>
                 :
                    <form className="todoForm" onSubmit={this.handleSubmit}>
                      <input
                          type="text"
                          placeholder="Type out a task"
                          value={this.state.text}
                          onChange={this.handleChange}
                          />
                      <input
                          type="submit"
                          value="Submit todo"
                          />
                    </form>
                  </div>
)