0

I'm trying to pass a Firebase response object from my index.js file into a component as Props, and I can't quite figure out how to pull it off. This is my database query:

`var allFlies = firebase.database().ref('flies');
allFlies.on('value', function(snapshot){
   var myObj = snapshot.val()
  })`

Which returns a JSON object (and four smaller objects inside of it that I want to be able to use). I'm trying to pass the info in and access it like so:

`ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route path="/basics" component={Basics}></Route>
      <Route path="/flies" component={ ()=> <Flies flyProps={myObj}/> }></Route>
    </Switch>
  </Router>, document.getElementById('root'));`

I'm not sure how to "export" myObj due to the scope issue.

yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • To make this work you have to move `ReactDOM.render` function into the callback function where you get `snapshot`. But this is not how usually we fetch data in React. You should move this data fetching part to `componentDidMount` lifecycle method of a component. Read more here https://stackoverflow.com/questions/41612200/in-react-js-should-i-make-my-initial-network-request-in-componentwillmount-or-co?noredirect=1&lq=1 – Tharaka Wijebandara Jun 03 '17 at 01:33
  • Ok, I decided to move everything to the component as you suggested. Makes sense after reading what you linked to. Thanks! – yoursweater Jun 03 '17 at 14:34

0 Answers0