working with search/filtering items

index.js

import React from 'react'
import { Div } from 'glamorous'

const filterPosts = (posts, term) => posts.filter(item => item.includes(term))

function List({ items }) {
  return <ul>{items.map((p, i) => <li key={i}>{p}</li>)}</ul>
}

class Index extends React.Component {
  state = {
    posts: ['first', 'second', 'third'],
    search: ''
  }

  render() {
    return (
      <Div
        css={{
          display: 'flex',
          flexDirection: 'column'
        }}
      >
        <Div
          css={{
            fontSize: '2.2em',
            display: 'flex',
            justifyContent: 'center',
            height: '10%',
            fontWeight: '200'
          }}
        >
          VicAdventures
        </Div>
        <Div
          css={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <input
            onChange={({ target: { value } }) =>
              this.setState({ search: value })}
          />
          <List items={filterPosts(this.state.posts, this.state.search)} />
        </Div>
      </Div>
    )
  }
}

export default Index