CODEWITHSUNDEEP
meteorreactjsapollo
SlartyBartfast
SlartyBartfast

Reputation: 311

React props using Meteor Apollo

I am playing with the Meteor Apollo demo repo.

I am having difficulty passing variables down to children with React. I am getting an error

imports/ui/Container.jsx:10:6: Unexpected token (10:6)

The below code is the Container.jsx component:

import React from 'react';
import { Accounts } from 'meteor/std:accounts-ui';

class Container extends React.Component {
  render() {
    let userId = this.props.userId;
    let currentUser = this.props.currentUser;
    }
    return (
      <Accounts.ui.LoginForm />
      { userId ? (
        <div>
          <pre>{JSON.stringify(currentUser, null, 2)}</pre>
          <button onClick={() => currentUser.refetch()}>Refetch!</button>
        </div>
      ) : 'Please log in!' }
     );
   }
 }

It is passed props via the Meteor Apollo data system (I have omitted some imports at the top):

const App = ({ userId, currentUser }) => {
  return (
    <div>
    <Sidebar />
    <Header />
    <Container userId={userId} currentUser={currentUser} />
    </div>
  )
}

// This container brings in Apollo GraphQL data
const AppWithData = connect({
  mapQueriesToProps({ ownProps }) {
    if (ownProps.userId) {
      return {
        currentUser: {
          query: `
            query getUserData ($id: String!) {
              user(id: $id) {
                emails {
                  address
                  verified
                }
                randomString
              }
            }
          `,
          variables: {
            id: ownProps.userId,
          },
        },
      };
    }
  },
})(App);

// This container brings in Tracker-enabled Meteor data
const AppWithUserId = createContainer(() => {
  return {
    userId: Meteor.userId(),
  };
}, AppWithData);

export default AppWithUserId;

I would really appreciate some pointers.

Upvotes: 0

Views: 238

Answers (1)

aedm
aedm

Reputation: 6624

I believe the error is that you accidentally ended the render function before the return statement.

render() { // <- here it starts
    let userId = this.props.userId;
    let currentUser = this.props.currentUser;
    } // <- here it ends

Another error is that your return statement doesn't return a single DOM element, but two of them: an Accounts.ui.LoginForm and a div. The return function should only return one element. Just put the entire thing into a single <div>.

Upvotes: 1

Related Questions