2. Your first synced component

We will build a simple user profile component that syncs the user object from your firebase database. There are two things that you should notice:

• we're using the absence of the user object on our state to show our component's loading state.
• our database object key is automatically saved on a special _key prop.
• if your object has a firebase priority this will also be saved on a special _priority prop.
• we are using our FirebaseSyncMapState util (as fbsMapState) to simplify the process of connecting our component to the redux state.

import React from 'react'
import { FirebaseSync, firebaseSyncConnect } from '../lib/FirebaseSync'

const User = (props) => (
  <div>
  
    <FirebaseSync path=`users/${props.userId}` />
    
    {(!props.user) ? (
      <p>loading…</p>
    ) : (
      <p>
        <h1>User name: {props.user.name}</h1>
        <p>User id: {props.user._key}</h1>
      </p>
    )}
  
  </div>
)

export default firebaseSyncConnect((state, props) => ({
  user: `users/${props.userId}`
})(User)