import React from 'react';
import RenderPropApproach from './RenderPropApproach';
function App() {
return (
<div className="App">
<RenderPropApproach />
</div>
);
}
export default App;
import { Component } from 'react';
import axios from 'axios';
import List from './List';
const API = 'https://wp1.com/wp-json/wp/v2/posts';
const DEFAULT_QUERY = '';
class Fetcher extends Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
data: [],
isLoading: false,
error: null,
};
}
componentDidMount() {
this.setState({
isLoading: true
});
axios({
method: 'get',
url: 'https://wp1.com/wp-json/wp/v2/posts',
data: null
}).then(result => {
this.setState({
data: result.data,
isLoading: false
});
}).catch(error => {
this.setState({
error,
isLoading: false
})
});
}
showPosts = (posts: any) => {
var result = null;
if (posts.length > 0) {
result = posts.map((post: any, index: any) => {
return (
<List key={index} post={post} index={index}>aaaa1</List>
)
})
};
return result;
}
render() {
var { data }: any = this.state;
console.log(data);
return (
<div>
{this.showPosts(data)}
</div>
);
}
}
export default Fetcher;
import { Component } from 'react';
import renderHTML from 'react-render-html';
class List extends Component<any, any> {
render() {
var { post } = this.props;
return (
<div className='list'>
<h1>{post.title.rendered}</h1>
<div dangerouslySetInnerHTML={{__html: post.content.rendered}}></div>
</div>
);
}
}
export default List;