How to return all users.profile properties in react?

1

I don’t understand what I’m doing wrong? How do I get all the users from Meteor.users?

            Roles = React.createClass({
        mixins: [ReactMeteorData],
        getMeteorData() {
          Meteor.subscribe('directory');
          return {
            users: Meteor.users.find({}).fetch(),
          }
        },
        getUsers() {
          // Get tasks from this.data.tasks
          return this.data.users.map((users) => {
            return <Users key={users._id} users={users} />;
          });
        },
        render() {
            return (
              <div className="container">
                <div className="employee">
                  <label htmlFor="employee">Employee Name:</label>
                  {this.getUsers()}
                </div>
            </div>
            )
        }
      });

      Users = React.createClass({
        render() {
          <div>
            {this.props.users.firstName}
          </div>
        }
      });

//publish.js

      Meteor.publish("directory", function () {
     return Meteor.users.find({}, {fields: {profile: 1}});
  });
2

This looks like it should work! It might be easier to analyze if you put it in an app I can run.

3

Error: Invariant Violation: Users.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

I get this error a lot and I’m not sure I understand it. Basically this.data.users shows up in my console with an object, but when I put this.data.users.firstName I get undefined.

4

Guess you need to subscribe to “directory”?

5

Line 4, is it incorrect?

6

try {this.props.users.profile.firstName}

7

Thanks, but no dice. Cannot return property of firstname of undefined.

8

@tdhz77 In the Users class you didn’t return the div.

Users = React.createClass({
  render() {
    return (
      <div>
        {this.props.users.firstName}
      </div>
    )
  }
})
9

Thank you @jeffshaver and everybody else who helped.

Here was the key for the nested array. I’m obviously not very good at React yet. Who is?

  return <Users key={user._id} users={user.profile} />; <--user.profile, instead of user. This returns the profile. Also, had to make sure I published the profile field.

My data structure is like
Users = {
"_id": “ajdlfkjdslkfj3”,
“username”: “jbrown”,
“profile”: {
“email”: "jbrown@google.com",
“displayname”: “John Brown”
}
}