Now searchRequest passes a index key to movieObject so that each div object can have a separate key.

This commit is contained in:
2017-10-06 12:20:51 +02:00
parent c954bd4874
commit 42749c5b64
2 changed files with 8 additions and 8 deletions

View File

@@ -34,7 +34,7 @@ class MovieObject {
notify.show(this.title + ' requested!', 'success', 3000); notify.show(this.title + ' requested!', 'success', 3000);
} }
getElement() { getElement(index) {
// TODO set the poster image async by updating the dom after this is returned // TODO set the poster image async by updating the dom after this is returned
if (this.poster == null || this.poster == undefined) { if (this.poster == null || this.poster == undefined) {
var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png' var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
@@ -60,7 +60,7 @@ class MovieObject {
return ( return (
<div> <div key={index}>
<Notifications /> <Notifications />
<div style={movieStyle.resultItem} key={this.id}> <div style={movieStyle.resultItem} key={this.id}>
<MediaQuery minWidth={600}> <MediaQuery minWidth={600}>

View File

@@ -156,11 +156,11 @@ class SearchRequest extends React.Component {
.then(responseData => { .then(responseData => {
if (this.state.page === 1) { if (this.state.page === 1) {
this.setState({ this.setState({
responseMovieList: responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)), responseMovieList: responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index)),
lastApiCallURI: uri // Save the value of the last sucessfull api call lastApiCallURI: uri // Save the value of the last sucessfull api call
}) })
} else { } else {
let responseMovieObjects = responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)); let responseMovieObjects = responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index));
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects); let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
this.setState({ this.setState({
responseMovieList: growingReponseMovieObjectList, responseMovieList: growingReponseMovieObjectList,
@@ -202,11 +202,11 @@ class SearchRequest extends React.Component {
.then(responseData => { .then(responseData => {
if (this.state.page === 1) { if (this.state.page === 1) {
this.setState({ this.setState({
responseMovieList: responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)), responseMovieList: responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index)),
lastApiCallURI: uri // Save the value of the last sucessfull api call lastApiCallURI: uri // Save the value of the last sucessfull api call
}) })
} else { } else {
let responseMovieObjects = responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)); let responseMovieObjects = responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index));
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects); let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
this.setState({ this.setState({
responseMovieList: growingReponseMovieObjectList, responseMovieList: growingReponseMovieObjectList,
@@ -288,9 +288,9 @@ class SearchRequest extends React.Component {
// When called passes the variable to MovieObject and calls it's interal function for // When called passes the variable to MovieObject and calls it's interal function for
// generating the wanted HTML // generating the wanted HTML
createMovieObjects(item) { createMovieObjects(item, index) {
let movie = new MovieObject(item); let movie = new MovieObject(item);
return movie.getElement(); return movie.getElement(index);
} }
toggleFilter(filterType) { toggleFilter(filterType) {