Kirill Stas Kirill Stas - 1 month ago 7
Javascript Question

React app reload when it shouldn`t be

I write small app. On the left side of screen it display list from

getInitialState
of some item one by one and on the right we have form to add new item to this list.
Firstly, when we type some text in input it add this text to object in
getInitialState
. Than, user click "Add item" and this function push this object to list. But trouble is that here reload happened and i dont know why. Page just reload and this list update to it default value.

Here is my code. First file is form:

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 (
<div className="row row-content">
<div className="col-xs-12 col-sm-11">
<form className="form-horizontal" role="form" onChange={this.handleChange}>
<div className="form-group">
<label htmlFor="firstname" className="col-sm-2 control-label">Title</label>
<div className="col-sm-10">
<input type="text" className="form-control" id="title" name="title" placeholder="Enter Film Title"/>
</div>
</div>
<div className="form-group">
<label htmlFor="lastname" className="col-sm-2 control-label">Year</label>
<div className="col-sm-10">
<input type="text" className="form-control" id="year" name="year" placeholder="Enter Film Year"/>
</div>
</div>

<div className="form-group">
<label htmlFor="emailid" className="col-sm-2 control-label">Quality</label>
<div className="col-sm-10">
<input type="text" className="form-control" id="quality" name="quality" placeholder="Quality"/>
</div>
</div>

<div className="form-group">
<label htmlFor="feedback" className="col-sm-2 control-label">Stars</label>
<div className="col-sm-10">
<textarea className="form-control" id="stars" name="stars" rows="12"></textarea>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button type="submit" className="btn btn-primary" onClick={this.submitNewFilm}>Add Film</button>
</div>
</div>
</form>
</div>

</div>
)
}
})

module.exports = iAmForm;


Than the second file is App which will be render in ReactDom.render:

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 < 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 (
<div className="row">
<h1 style={{textAlign:'center'}}>Hi, my name is Cir. I am 19, from Kiev, Ukraine. How are you ?</h1>
<div className="col-md-8">
<div>
<div className="row">
<div className="col-md-9" style={{marginLeft:'40px'}}>
<SearchFilm/>
</div>
<div className="col-md-2" style={{float: 'right'}} >
<SortFilms/>
</div>
</div>
<div className="row">
<div className="col-md-12">
<ul>

{this.state.list.map((film) => (
<div>
{film.Show ? <FilmLong onDeleteClick={this.deleteFilm} onShowClick={this.changeShow} filmInArray={film}/>:<FilmShort onClick={this.changeShow} filmInArray={film}/>}
</div>
))}

</ul>
</div>
</div>
</div>
</div>
<div className="col-md-4">
<IchBinForm onChange={this.seeForChangeInForm} onClick={this.addNewFilm}/>
</div>
</div>
);
}
});

module.exports = App;


Thanks for any ideas.

Answer

You haven't disabled the default behavior of the submit button so it ends actually submitting the form normally, so change that handler to:

submitNewFilm: function(e) {
  e.preventDefault();
  this.props.onClick();
}
Comments