Filtering List in React
<p>I am creating a basic blog in react using Flux + React Router + Firebase. I am having trouble trying to get a single blog post to render. When I click on the link to a single post, I try to filter out all of the other posts from a list of all posts and display only a single post from my firebase database. </p>

<p>I attempt to do this by matching the key of the firebase entry with the url params like so <code>if (this.props.routeParams.key===key)</code> . I really do not know what I have to do to make this happen. Any suggestions are welcome. </p>

<p>Below is Blogger.jsx, the page where I allow a user to create a blog post and then beneath the blog post, I display a list of the titles all blog posts.</p>

<pre><code>import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import List from './List.jsx'
import Firebase from 'firebase'
import BlogStore from '../stores/BlogStore'
import BlogActions from '../actions/BlogActions';


const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';



export default class Blogger extends React.Component {
  constructor(props) {
    super(props);
    BlogStore.getState();
    BlogStore.mountFirebase();
    {console.log(this.props.location.query)}

    };


  componentDidMount() {
    BlogStore.listen((state) =&gt; {
      this.setState(state)
    })
    this.firebaseRef = new Firebase(rootURL + 'items/');
  }

  componentWillMount() {
    BlogStore.unlisten((state) =&gt; {
      this.setState(state)
    })
  }




  renderList = (key) =&gt; {
      return (
      &lt;Link to={`blogshow/${key}`}&gt; &lt;List key={key} blog={this.state.blog[key]} /&gt; &lt;/Link&gt;
      )
    }


  handleInputChange = () =&gt; {

    BlogStore.setState({
      title: this.refs.title.value,
      text: this.refs.text.value});
  }


  handleClick = () =&gt; {

    BlogStore.handleClick();
  }


  render() {
    return (
      &lt;div&gt;
        &lt;div className="row panel panel-default"&gt;
          &lt;div className="col-md-8 col-md-offset-2"&gt;
            &lt;h2&gt;
                Create a New Blog Post
            &lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;

&lt;h2&gt;Blog Title&lt;/h2&gt;
        &lt;div className="input-group"&gt;
          &lt;input
          ref="title"
          value={BlogStore.state.title}
          onChange = {this.handleInputChange}
          type="text"
          className="form-control"/&gt;
          &lt;span className="input-group-btn"&gt;

          &lt;/span&gt;
        &lt;/div&gt;

&lt;h2&gt;Blog Entry&lt;/h2&gt;
        &lt;div className="input-group"&gt;
          &lt;textarea
          ref="text"
          value={BlogStore.state.text}
          onChange = {this.handleInputChange}
          type="text"
          className="form-control"/&gt;

        &lt;/div&gt;

        &lt;div className="blog-submit input-group-btn"&gt;
          &lt;button onClick={this.handleClick}
          className="btn btn-default" type="button"&gt;
            Publish Blog Post
          &lt;/button&gt;
        &lt;/div&gt;

        {/*&lt;List blog={this.state.blog} /&gt;*/}

        {Object.keys(BlogStore.state.blog)
       .map(this.renderList)}



    &lt;/div&gt;



    );
  }

}
</code></pre>

<p>When a user clicks on a link to a single blog post, they should be transported to a page which shows only that single blog post. I have called this component BlogShow. I can't get BlogShow to render because I keep on getting the error </p>

<blockquote>
  <p>invariant.js?4599:45 Uncaught Invariant Violation: BlogShow.render(): A
  valid React element (or null) must be returned. You may have returned
  undefined, an array or some other invalid object.</p>
</blockquote>

<p>This is BlogShow.jsx:</p>

<pre><code>import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import Blogger from './Blogger'
import List from './List'
const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';

import BlogStore from '../stores/BlogStore'
import BlogActions from '../actions/BlogActions';



export default class BlogShow extends React.Component {
  constructor(props) {
    super(props);
    {console.log(this.props.routeParams.key)}
    this.filterList = this.filterList.bind(this);

}



filterList(key) {
  if (this.props.routeParams.key===key) {
    return (&lt;List key={key} blog={BlogStore.state.blog[key]} /&gt;)
  }
}

  render() {

             &lt;div&gt; {Object.keys(BlogStore.state.blog).map(this.filterList)} &lt;/div&gt;


  }

}
</code></pre>