Displaying data from Firebase in React without arrays

Question

I am new to both React and Firebase. I struggled a bit to get data from the database, even though the instructions on the Firebase website were pretty straightforward.

I managed to print data in the view by using this code:

Get data from DB and save it in state:

INSTRUMENTS_DB.once('value').then(function(snapshot) {
        this.state.instruments.push(snapshot.val());
        this.setState({
            instruments: this.state.instruments
        });

From Firebase, I receive and Object containing several objects, which correspond to the differen instruments, like shown in the following snippet:

Object {
    Object {
        name: "Electric guitar",
        image: "img/guitar.svg"
    }
    Object {
        name: "Bass guitar",
        image: "img/bass.svg"
    }
    // and so on..
}

Currently, I print data by populating an array like this:

var rows = [];
    for (var obj in this.state.instruments[0]) {
        rows.push(<Instrument name={this.state.instruments[0][obj].name}
                              image={this.state.instruments[0][obj].image}/>);
    }

I feel like there's a better way to do it, can somedody give a hint? Thanks

Chris Panayotoff · Accepted Answer · 2017-01-12 08:54:15Z

2

I user firebase a lot and mu solution is little ES6 helper function

const toArray = function (firebaseObj) {

return Object.keys(firebaseObj).map((key)=> {
    return Object.assign(firebaseObj[key], {key});
})

};

I also assign the firebase key to object key property, so later I can work with the keys.

answered Jan 12, 2017 at 8:54

Chris Panayotoff

1,95623 silver badges25 bronze badges

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

Comments

Pineda · Accepted Answer · 2016-11-14 10:00:50Z

1

The native map function only works for arrays, so using directly it on this object won't work.

What you can do instead is:

Call the map function on the keys of your object using Object.keys():

getInstrumentRows() {
  const instruments = this.state.instruments;
  Object.keys(instruments).map((key, index) => {
    let instrument = instruments[key];
    // You can now use instrument.name and instrument.image
    return  <Instrument name={instrument.name} image={instrument.image}/>
  });
}

Alternatively, you can also import the lodash library and use its map method which would allow you to refactor the above code into:

getInstrumentRowsUsingLodash() {
  const instruments = this.state.instruments;
    _.map(instruments, (key, index) => {
    let instrument = instruments[key];
    // You can now use instrument.name and instrument.image
    return  <Instrument name={instrument.name} image={instrument.image}/>
  });
}

Side note: When you retrieve you data from Firebase you attempt to update the state directly with a call on this.state.instruments. The state in React should be treated as Immutable and should not be mutated with direct calls to it like push.

edited Nov 14, 2016 at 10:00

answered Nov 12, 2016 at 20:05

Pineda

7,5933 gold badges34 silver badges47 bronze badges

2 Comments

The Condor Over a year ago

Thanks! I used the first solution and I could finally access the instrument properties!

Pineda Over a year ago

Glad I could help :-)

Piotr Sołtysiak · Accepted Answer · 2016-11-12 18:38:18Z

0

I would use map function:

_getInstrumentRows() {
    const instruments = this.state.instruments[0];
    if (instruments) {
        return instruments.map((instrument) => 
            <Instrument name={instrument.name}
                        image={instrument.image}/>);
    }
}

In your render() method you just use {_getInstrumentRows()} wherever you need it.

answered Nov 12, 2016 at 18:38

Piotr Sołtysiak

1,0066 silver badges13 bronze badges

Collectives™ on Stack Overflow

Displaying data from Firebase in React without arrays

3 Answers 3

Comments

What you can do instead is:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

What you can do instead is:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related