title: React app reload when it shouldn`t be
body: <p>I wrote a small app. On the left side of screen, it displays a list from <code>getInitialState</code> of some item one by one and on the right we have a form to add a new item to this list.
  First, when we type some text in input it add this text to object in <code>getInitialState</code>. Then, user clicks "Add item" and this function pushes this object to list. But the trouble is that here a reload happened and I don't know why. Page just reload and this list update to it default value.</p>
  
  <p>Here is my code. First file is form:</p>
  
  <pre><code>import React from 'react';
  
  var iAmForm = React.createClass({
    submitNewFilm: function() {
      this.props.onClick();
    },
  
    handleChange: function(e) {
      var whatIsDiff = e.target.value;
      var whereIsDiff = e.target.id;
      this.props.onChange(whatIsDiff, whereIsDiff);
  
    },
    render: function() {
      return (
        &lt;div className="row row-content"&gt;
            &lt;div className="col-xs-12 col-sm-11"&gt;
                &lt;form className="form-horizontal" role="form" onChange={this.handleChange}&gt;
                    &lt;div className="form-group"&gt;
                        &lt;label htmlFor="firstname" className="col-sm-2 control-label"&gt;Title&lt;/label&gt;
                        &lt;div className="col-sm-10"&gt;
                        &lt;input type="text" className="form-control" id="title" name="title" placeholder="Enter Film Title"/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="form-group"&gt;
                        &lt;label htmlFor="lastname" className="col-sm-2 control-label"&gt;Year&lt;/label&gt;
                        &lt;div className="col-sm-10"&gt;
                            &lt;input type="text" className="form-control" id="year" name="year" placeholder="Enter Film Year"/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div className="form-group"&gt;
                        &lt;label htmlFor="emailid" className="col-sm-2 control-label"&gt;Quality&lt;/label&gt;
                        &lt;div className="col-sm-10"&gt;
                            &lt;input type="text" className="form-control" id="quality" name="quality" placeholder="Quality"/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div className="form-group"&gt;
                        &lt;label htmlFor="feedback" className="col-sm-2 control-label"&gt;Stars&lt;/label&gt;
                        &lt;div className="col-sm-10"&gt;
                            &lt;textarea className="form-control" id="stars" name="stars" rows="12"&gt;&lt;/textarea&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="form-group"&gt;
                        &lt;div className="col-sm-offset-2 col-sm-10"&gt;
                            &lt;button type="submit" className="btn btn-primary" onClick={this.submitNewFilm}&gt;Add Film&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
  
       &lt;/div&gt;
      )
    }
  })
  
  module.exports = iAmForm;
  </code></pre>
  
  <p>Than the second file is App which will be render in ReactDom.render:</p>
  
  <pre><code>import React from 'react';
  
  var IchBinForm = require('./IchBinForm');
  var SortFilms = require('./SortFilms');
  var SearchFilm = require('./SearchFilm');
  var FilmShort = require('./FilmShort.js');
  var FilmLong = require('./FilmLong.js');
  
  var App = React.createClass({
    getInitialState: function() {
      return {list: [
          {id:'1',
          title: 'The Baby Boss',
          year: '2017',
          quality: 'Blu-ray',
          stars: 'Fred Astaire, Humphrey Bogart, Marlon Brando, Richard Burton, Charlie Chaplin',
          Show: true
          },
          {id:'2',
          title: 'Pirates of the Caribbean: Dead Men Tell No Tales ',
          year: '2016',
          quality: 'HDrip',
          stars: 'John Depp, Orlando Bloom, Javier Bardem, Kaya Scodelario, Brenton Thwaites',
          Show: true
          },
          {id:'3',
          title: 'Fast 8',
          year: '2016',
          quality: 'Blu-ray',
          stars: 'Vin Diesel, Dwayne Johnson, Jason Statham, Michelle Rodriguez, Tyrese Gibson',
          Show: true
          }
        ],
        newFilm: {
          id:'',
          title: '',
          year: '',
          quality: '',
          stars: [],
          Show: true
        }
      }
    },
  
    changeShow: function(newShow, filmId) {
      this.setState({
        list: this.state.list.map(function(film) {
          if (film.id == filmId) {
            film.Show = newShow;
          }
          return film;
        })
      });
    },
  
    deleteFilm: function(id) {
      for (var film=0; film &lt; this.state.list.length; film++) {
        if (this.state.list[film].id == id) {
          this.state.list.splice(film, 1);
        }
      };
      this.setState({
        list: this.state.list
      })
    },
  
    seeForChangeInForm: function(change, id) {
      var newId = this.state.list.length + 1
  
      if (id == 'title') {
        var whatChange = {
          id: newId,
          title: change,
          year: this.state.newFilm.year,
          quality: this.state.newFilm.quality,
          stars: this.state.newFilm.stars,
          Show: this.state.newFilm.Show
        }
      }
      else if (id == 'year') {
        var whatChange = {
          id: newId,
          title: this.state.newFilm.title,
          year: change,
          quality: this.state.newFilm.quality,
          stars: this.state.newFilm.stars,
          Show: this.state.newFilm.Show
        }
      }
      else if (id == 'quality') {
        var whatChange = {
          id: newId,
          title: this.state.newFilm.title,
          year: this.state.newFilm.year,
          quality: change,
          stars: this.state.newFilm.stars,
          Show: this.state.newFilm.Show
        }
      }
      else if (id == 'stars') {
        var whatChange = {
          id: newId,
          title: this.state.newFilm.title,
          year: this.state.newFilm.year,
          quality: this.state.newFilm.quality,
          stars: change,
          Show: this.state.newFilm.Show
        }
      }
      this.setState({newFilm:whatChange})
      //alert(this.state.newFilm.id)
    },
  
    addNewFilm: function() {
      var newList = this.state.list.push(this.state.newFilm);
  
      this.setState({list:this.state.list})
      alert(newList)
    },
  
    render: function() {
      return (
        &lt;div className="row"&gt;
          &lt;h1 style={{textAlign:'center'}}&gt;Hi, my name is Cir. I am 19, from Kiev, Ukraine. How are you ?&lt;/h1&gt;
          &lt;div className="col-md-8"&gt;
            &lt;div&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-md-9" style={{marginLeft:'40px'}}&gt;
                  &lt;SearchFilm/&gt;
                &lt;/div&gt;
                &lt;div className="col-md-2" style={{float: 'right'}} &gt;
                  &lt;SortFilms/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
               &lt;div className="col-md-12"&gt;
                &lt;ul&gt;
  
                   {this.state.list.map((film) =&gt; (
                     &lt;div&gt;
                     {film.Show ? &lt;FilmLong onDeleteClick={this.deleteFilm} onShowClick={this.changeShow} filmInArray={film}/&gt;:&lt;FilmShort onClick={this.changeShow} filmInArray={film}/&gt;}
                     &lt;/div&gt;
                   ))}
  
                &lt;/ul&gt;
               &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="col-md-4"&gt;
            &lt;IchBinForm onChange={this.seeForChangeInForm} onClick={this.addNewFilm}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = App;
  </code></pre>
  
  <p>Thanks for any ideas.</p>