CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-database
maxwellgover
maxwellgover

Reputation: 7111

Rendering Firebase Data in React

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;

Upvotes: 0

Views: 1255

Answers (1)

jered
jered

Reputation: 11571

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

Upvotes: 1

Related Questions