export default class App extends Component {
state = {
films: films,
tags: null,
limit: 15,
term : ''
}
increaseLimit = (limit) => {
const newLimit = limit + 15;
return newLimit;
}
showMore = () => {
this.setState(({ limit }) => {
return {
limit : this.increaseLimit(limit),
}
});
};
onSearch = ( items, term) => {
if (term.length === 0) {
return items;
}
return items.filter((item) => {
return item.title
.toLowerCase()
.indexOf(term.toLowerCase()) > -1;
});
};
render() {
const { films, limit, term } = this.state;
let showButton;
const filteredList = this.onSearch( films, term );
Object.keys(filteredList).length > limit ? showButton = true : showButton = false;
return (
<div className="app">
<TabButtons />
<SearchPanel
onSearchChange={ this.onSearchChange }/>
<FilmList
films={ filteredList }
limit={ limit }/>
{ showButton ? (
<ShowMoreButton showMore={ this.showMore }/>
) : (
null
)}
</div>
);
};
};
Хочу чтобы при вызове функции onSearch - стэйт Limit принимал значение 15. При попытке написать там что-то вроде this.setState ({ limit : 15 }) оно вызывает ошибку о том что происходит бесконечный вызов функции. Сама идея в том, что когда список изменяется с помощью фильтра - лимит вывода бы становился снова 15, так как он каждый раз увеличивается, когда нажимаешь на кнопку