src/containers/series/index.js
Buat folder dan file index berikut ini src/containers/series/index.js. Detailnya dapat dilihat seperti snapshot berikut ini:
 |
| src/containers/series/index.js |
src/components/App/index.js
Ubah file src/components/App/index.js, Detailnya dapat dilihat seperti snapshot berikut ini: |
| src/components/App/index.js |
Penampakan di Browser
 |
| Penampakan di Browser |
src/containers/series/index.js
import React, {Component} from 'react';
class Series extends Component {
static get xapi() {
return 'http://api.tvmaze.com/search/shows?q=vikings';
}
state = {
series: []
}
// dipanggil otomatis saat component dimount
componentDidMount() {
fetch(Series.xapi).then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
console.log(json);
this.setState({series: json});
});
}
// dipanggil otomatis saat component diunmount (lifecycle)
componentWillUnmount() {
}
render() {
return (
<div>Total series ada: {this.state.series.length}</div>
)
}
}
export default Series;
src/components/App/index.js
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Intro from '../Intro';
import Series from '../../containers/Series';
//const Intro = (props) => <p className="App-indtro">Test aja kawanku!</p>;
class App extends Component {
render() {
return (
<div className="App">
<Intro messages="Hai kawan lagi apa" person="Jonima" />
<Series />
</div>
);
}
}
export default App;
Hasil di Browser
Tampaknya contoh diatas yang saya ikuti dari sini adalah kurang tepat.
Masih kurang meyakinkan contoh diatas!
Ups saya yang salah, tutorial yang saya ikuti belum lengkap harusnya ada kelanjutannya disini https://undebugable.blogspot.com/2019/06/reactjs-lists-dan-keys.html atau dicaatan saya di
https://undebugable.blogspot.com/2019/06/reactjs-lists-dan-keys.html..
Catatan diatas adalah berasal dari sini dan saya masih kurang yakin kalau contoh tersebut benar. Untuk meyakinkan saya akan mencoba lagi untuk Container ini dari sumber yang lebih kredibel yaitu https://www.freecodecamp.org/news/react-superpowers-container-pattern-20d664bdae65/.
Harusnya Seperti Ini...
Buat file Untuk View src/components/Series/List.js
Ini berfungsi untuk menampilkan data, nantinya akan diwrap dengan API request dalam container.
import React from 'react';
const List = (props) => {
return <div>Total series ada: {props.total}</div>
}
export default List;
Buat file Container src/containers/Series/ListContainer.js
Container Ini berfungsi mewrap satu atau beberapa view dengan proses dll.
import React, {Component} from 'react';
import SeriesList from '../../components/Series/List.js'
class ListContainer extends Component {
static get xapi() {
return 'http://api.tvmaze.com/search/shows?q=vikings';
}
state = {
series: []
}
// dipanggil otomatis saat component dimount
componentDidMount() {
fetch(ListContainer.xapi).then((response) => {
console.log(response);
return response.json();
})
.then((json) => {
console.log(json);
this.setState({series: json});
});
}
// dipanggil otomatis saat component diunmount (lifecycle)
componentWillUnmount() {
}
render() {
return (
<SeriesList total={this.state.series.length} />
)
}
}
export default ListContainer;
Hasilnya Adalah
<ListContainer />
Atau sebagai berikut
ReactDOM.render(<ListContainer />, document.getElementById('root'));
Comments
Post a Comment