CodeYogi CodeYogi - 7 months ago 48
Javascript Question

Filtering List in React

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.

I attempt to do this by matching the key of the firebase entry with the url params like so

if (this.props.routeParams.key===key)
. I really do not know what I have to do to make this happen. Any suggestions are welcome.

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.

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) => {
this.setState(state)
})
this.firebaseRef = new Firebase(rootURL + 'items/');
}

componentWillMount() {
BlogStore.unlisten((state) => {
this.setState(state)
})
}




renderList = (key) => {
return (
<Link to={`blogshow/${key}`}> <List key={key} blog={this.state.blog[key]} /> </Link>
)
}


handleInputChange = () => {

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


handleClick = () => {

BlogStore.handleClick();
}


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

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

</span>
</div>

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

</div>

<div className="blog-submit input-group-btn">
<button onClick={this.handleClick}
className="btn btn-default" type="button">
Publish Blog Post
</button>
</div>

{/*<List blog={this.state.blog} />*/}

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



</div>



);
}

}


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


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.


This is BlogShow.jsx:

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 (<List key={key} blog={BlogStore.state.blog[key]} />)
}
}

render() {

<div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>


}

}

QoP QoP
Answer

You are getting that error because your Component BlogShow is not returning anything.

render() {
    <div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>
}

Should be:

render() {
    return <div> {Object.keys(BlogStore.state.blog).map(this.filterList)} </div>
}