React Firebase Map/Filter

react-example.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from 'firebase';

class App extends Component {
  constructor(props) {
    super(props);

    var config = {
      apiKey: "AIzaSyCkzZrgacyb6wVpmhCyl0ww8gBY5z0EHg8",
      authDomain: "react-cool.firebaseapp.com",
      databaseURL: "https://react-cool.firebaseio.com",
      projectId: "react-cool",
      storageBucket: "react-cool.appspot.com",
      messagingSenderId: "974569918115"
    };

    firebase.initializeApp(config);
    const fireBaseRef = firebase.database().ref('messages');
    fireBaseRef.on('value', snapshot => {
      const messages = snapshot.val();
      const middleAgePeople = messages.filter(({age}) => age> 30).map(({name, age}) => `${name} is ${age} old`);
      console.log(middleAgePeople);
      this.setState({
        messages
      })
    });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;