Skip to content

Instantly share code, notes, and snippets.

@MirzaChilman
Created February 7, 2019 16:13
Show Gist options
  • Save MirzaChilman/1dcc791fa34118c010b4682e849c3fe6 to your computer and use it in GitHub Desktop.
Save MirzaChilman/1dcc791fa34118c010b4682e849c3fe6 to your computer and use it in GitHub Desktop.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
data: [],
numberPaginate: 1,
position: 0,
dataFinal: []
};
async componentDidMount() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await res.json();
const numberPaginate = Math.round(data.length / 6);
this.setState({
data: data,
numberPaginate: numberPaginate
});
}
clickHandler = angkaPosition => {
const banyakDataYangDiTampilkan = angkaPosition * 6;
const dataFinal = this.state.data.slice(
(angkaPosition - 1) * 6,
banyakDataYangDiTampilkan + 1
);
this.setState({
dataFinal,
position: angkaPosition
});
};
createPaginate = numberPaginate => {
let pag = [];
for (let i = 1; i <= numberPaginate; i++) {
pag.push(<span onClick={() => this.clickHandler(i)}>{i}</span>);
}
return pag;
};
render() {
const { numberPaginate, position, dataFinal } = this.state;
return (
<div>
<div>
{dataFinal.map(datum => {
return (
<div>
<ul>
<li>{datum.id}</li>
<li>{datum.title}</li>
</ul>
</div>
);
})}
</div>
<div className="flexKu">{this.createPaginate(numberPaginate)}</div>
<div>
<br />
{position}
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment