Fetch data.slice is not a function issue - json

Question

I have a problem with slicing my json. I was using data.json and everything worked fine, but when I'm trying to use the same with fetch. Console tells me that data.slice is not a function. This is my code in React:
const left = '<';
const right = '>';
const { currentPage, usersPerPage } = this.state;
const lastPage = currentPage * usersPerPage;
const firstPage = lastPage - usersPerPage;
const data = fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json());
const currentPhotos = data.slice(firstPage, lastPage);
const renderPhotos = currentPhotos.map((photo) => {
return <tr key={photo.id}>
<td className="number">{photo.title}</td>
</tr>
});
const numbers = [];
for (let i = 1; i <= Math.ceil(data.length / usersPerPage); i++) {
numbers.push(i);
}
const renderPagination = numbers.map(number => {
return (
<li className="controls" key={number} id={number} onClick={this.handlePages}>
{number}
</li>
);
});

Answer 1

fetch is async, which means it returns a promise.
const data = fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(json => console.log(json));
the constant data here is a Promise. which awaits to get resolved, to get your code to work you either have to use async/await like this:
const data = await fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(json => console.log(json));
and you will also have to add the async keyword to your top function that wraps your code, but if this is a website you'll need to use babel for this to work in all browsers.
another take is using the callback technique but you will have to do some rewrite, but here is a start:
fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(data => {
const currentPhotos = data.slice(firstPage, lastPage);
const renderPhotos = currentPhotos.map((photo) => {
return <tr key={photo.id}>
<td className="number">{photo.title}</td>
</tr>
});
});

Answer 2

fetch returns a Promise, so if you want to use slice method, you should use it inside the last .then(), but it would be better if you fetch your data in componentDidMount, save your data in React state, and after that use in render method;
for example, your code should look like:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => {
const data = response.json();
this.setState({
data: data,
});
);
}
render() {
const { currentPage, usersPerPage, data } = this.state;
const currentPhotos = data.slice(firstPage, lastPage);
const renderPhotos = currentPhotos.map((photo) => (
<tr key={photo.id}>
<td className="number">{photo.title}</td>
</tr>
);
const numbers = [];
for (let i = 1; i <= Math.ceil(data.length / usersPerPage); i++) {
numbers.push(i);
}
const renderPagination = numbers.map(number => {
return (
<li className="controls" key={number} id={number} onClick={this.handlePages}>
{number}
</li>
);
});
}