Rendering Firebase Data in React

Question

I'm looking to render some firebase data to the HomeFeed component. I update the state in the componentDidMount method. You can see what that looks like below. It's an array. Should I just map over that using the map function? How do I access the specific info like "title", "link", "type", etc. to be able to render it?

Thanks a lot!

var React = require('react');
var Rebase = require('re-base');
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/");

// TODO: Render Firebase data to screen.

// Home
// <Home />
var HomeContainer = React.createClass({
    render : function() {
        return (
            <div className="homeContainer">
                <HomeFeed />
            </div>
        );
    }
});

// Home Feed
// <HomeFeed />
var HomeFeed = React.createClass({
    componentDidMount: function() {
        base.fetch('article', {
            context: this,
            asArray: true,
            then(data){
                console.log(data);
                this.setState({
                    feed: data
                })
            }
        });
    },
    getInitialState: function() {
        return {
            feed: []
        }
    }, 
    render : function() {
        return (
            <div className="homeFeed">
                {/* Use map function here? */}
            </div>
        );
    } 
});

module.exports = HomeContainer;

jered · Accepted Answer · 2016-08-24 21:24:42Z

1

render will run whenever state has been changed (unless you modify this behavior with, say, shouldComponentUpdate) so as long as you use setState properly your component will automatically update when its state changes.

If you're asking specifically how to turn an array into something that render understands, then yes, map is a very common way to do that. It might look something like this:

render : function() {
    return (
        <div className="homeFeed">
            {this.state.feed.map(function(ea){
                return <div>{ea.someProperty}</div>
            })}
        </div>
    );
}

Note that you have to wrap ea.someProperty in curly braces because you're basically inserting JSX inside of a JavaScript expression inside of even more JSX. This kind of nested JSX/Expression/JSX structure is something you'll have to get comfortable with in React I'm afraid.

More about array.map

answered Aug 24, 2016 at 21:24

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jered Over a year ago

@staxwell If I've answered your original question please upvote and accept the answer. :)

Collectives™ on Stack Overflow

Rendering Firebase Data in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related