const PostList = ({posts}) => (
  posts.map(post => <Post post={post} />)
)


class PostPage extends Component {
  state = {
    posts: [],
    category: ""
  }

  componentDidMount() {
    fetchPost().then(posts => this.setState({posts}))
  }

  render() {
    const {
      category
    } = this.state;

    const posts = this.state.posts.filter(post => post.category === category)

    return <>
      <input
        type="text"
        onChange={e => this.setState({category: e.target.value})}
        value={category}
      />
      
      <PostList posts={this.state.posts} />
    </>
  }
}