How can I access nested data in Firebase with React?
I am working on building a simple app with React and Firebase - a way to manage income and expenditure, and my Firebase is set up with the following structure:
"cashbook" : {
"expenditure" : {
"expenditure-1" : {
"amount" : "500",
"category" : "insurance",
"date" : "date",
"name" : "Life Insurance",
"type" : "recurring"
}
},
"income" : {
"salary" : {
"amount" : "500",
"category" : "salary",
"date" : "date",
"type" : "recurring"
}
}
}
I have React set up and working perfectly with just the expenditure, using Re-base:
componentDidMount: function() {
// Two way data binding
base.syncState('cashbook/expenditure', {
context: this,
state: 'expenditure'
});
},
I can then reference using: this.state.expenditure
However, when I try to expand the app to access the Income data, things go pear shaped. I amended the componentdidmount to:
componentDidMount: function() {
// Two way data binding
base.syncState('cashbook', {
context: this,
state: 'cashbook'
});
},
And try to access with this.state.cashbook.expenditure
and this.state.cashbook.income
, but no joy, I get the error: Uncaught TypeError: Cannot read property 'expenditure' of undefined
.
Not quite sure what to try, any pointers would be divine brown.
Thanks in advance :)
Answer
Turns out I was being a moron :)
I just needed to use syncstate on cashbook
instead of cashbook/expenditure
and call this.state.cashbook.expenditure
.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM