working with search/filtering items

index.js

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

class Index extends React.Component {
  constructor(props) {
    super(props)
  }

  componentWillMount() {
    this.setState({
      posts: [
        'first',
        'second',
        'third'
      ],
      originalPosts: [
        'first',
        'second',
        'third'
      ],
    })
  }

  filterPosts(e) {
    const filteredPosts = !e.target.value ? this.state.originalPosts :
      this.state.originalPosts.filter(p => p.startsWith(e.target.value))

    this.setState({
      posts: filteredPosts,
    })
  }

  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={(e) => this.filterPosts(e)}/>
            {this.state.posts.map((p, i) => <div key={i}>{p}</div>)}
          </Div>
      </Div>
    )
  }
}

export default Index