App.jsx

import React, { Component, PropType } from 'react';
import { ListGroup, ListGroupItem, Grid, Row, Input } from 'react-bootstrap';
import Channels from './Channels';

export default class App extends Component {
  static defaultProps = {
    channels: [
      "reactjs",
      "general",
      "random",
      "flux",
      "relay",
      "immutablejs",
      "flow",
      "webpack",
      "babel"
    ]
  };
  constructor(props) {
    super(props);
    this.state = { searchQuery: '' };
    this.changeSearchQuery = this.changeSearchQuery.bind(this);
    this.filteredChannels = this.filteredChannels.bind(this);
  }

  changeSearchQuery(ev) {
    this.setState({ searchQuery: ev.target.value });
  }

  filteredChannels() {
    let { channels } = this.props,
        { searchQuery } = this.state;

    return channels.filter(channel => {
      return channel.indexOf(searchQuery) === 0;
    });
  }

  render() {
    let { channels } = this.filteredChannels(),
        { searchQuery } = this.state;
  return (
    <Grid fluid={true}>
      <Row>
        <Input type="text"
                placeholder="Search channels..."
                bsSize="large"
                value={searchQuery}
                onChange={this.changeSearchQuery} />
        <Channels channels={channels} />
      </Row>
    </Grid>
    );
  }
}

Channels.jsx

import React, { Component } from 'react';
import { ListGroupItem, ListGroup } from 'react-bootstrap';

export default class Channels extends Component {
  render() {
    let { channels } = this.props;

    return (
      <ListGroup>
        {channels.map(channel =>
          <ListGroupItem key={channel} href={`#${channel}`}>
            #{channel}
          </ListGroupItem>
        )}
      </ListGroup>
    );
  }
}