Всем добрый вечер! Есть вот такой компонент. Который рисует таблицу. Нужно

получить данные по GET и вывести в таблицу сделав пагинацию данных на стороне клиенета (выводить по кусочкам) с элементами навигации. 1) Возвращается JSON, данные - рандомная выборка 32-х элементов из тысячи. И проставленные ID иногда повторяются у разных элементов массива, поэтому я проставляю свои _ID использую SetState. (если без пагинации, то всё ок, я проверял и всё выводит) 2) Далее я при помощи метода filter хочу отбирать элементы айди которого в нужном интервале, и таким образом сделаю пагинацию и тут возникает "НО": сборщик приложения говорит что всё ок, но в браузере ругается на filter. Почему? Возможно абсолютно нубский вопрос, но извините уж...

Код компонента
import React, { Component } from 'react';

class Table extends Component {

constructor(props) {
super(props);
this.state = {
data: null,
isOpen: false,
intervalData: null
};
}

componentDidMount() {
let getData = new XMLHttpRequest();
getData.open("GET", "http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}", true);
getData.onreadystatechange = () => {
if (getData.readyState !== 4 || getData.status !== 200) return;
var data = JSON.parse(getData.responseText);
data.forEach((item, i) => {
item._id = i + 1;
});
this.setState({ data })
};
getData.send();

}

PaginationOfTables(startIntervalIdOfElements, endIntervalIdOfElements) {
//var start = startIntervalIdOfElements
//var end = endIntervalIdOfElements;
var intervalData = this.state.data;

intervalData = intervalData.filter(function (elem) {

return elem._id === 5;
})
this.setState({ intervalData })
console.log("PaginationOfTables: " + intervalData)
}

render() {
this.PaginationOfTables('1', '10');

let component = null;
if (!this.state.intervalData) {
component = <tbody><tr><td><h1>Loading...</h1></td></tr></tbody>
}
else {
component = <tbody>{this.state.intervalData.map((tbodyPeople) =>
<tr key={tbodyPeople._id}>
<td>{tbodyPeople._id}</td>
<td>{tbodyPeople.id}</td>
<td>{tbodyPeople.firstName}</td>
<td>{tbodyPeople.lastName}</td>
<td>{tbodyPeople.email}</td>
<td>{tbodyPeople.phone}</td>
<td>{tbodyPeople.address.state}, {tbodyPeople.address.city}, {tbodyPeople.address.streetAddress}, {tbodyPeople.address.zip} </td>
<td>{tbodyPeople.description}</td>
</tr>)
}
</tbody>
}

return (
<div className="App container">
<h1>
Header
</h1>
<table className="table container">
<thead>
<tr>
<th>№</th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Description</th>
</tr>
</thead>
{component}
</table>
</div>
);
}
}
export default Table;

в конструкторе data: [] сделай а не null. ругается ведь что фильтр у null пытаешься вызвать