Loading react with initial data/user-side settings page

Please have a look at my code. And tell me how to pass the value of object to input

This is my subscription:

if (Meteor.isServer) {
  Meteor.publish('userfunction', function(){
      return Meteor.users.find({});
  });
}

Parent component ‘App’ :

import React, { Component} from 'react';
import { render } from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import ProfileCandidateForm from './ProfileCandidateForm.jsx';

export default class App extends TrackerReact(Component) {
	constructor(){
		super();
		this.state = {
			subscription : {
				"usersData" : Meteor.subscribe('userfunction')
			}
		}
	}

  'editProfile'(event){
    event.preventDefault();
    var doc = {
	            username   : this.refs.username.value,
             }

    console.log(doc);
  }

	userData(){
		var userId  = Meteor.userId();
		return Meteor.users.find({'_id': userId}).fetch();
	}

	render(){
	   console.log(this.userData());	
       return(
			  <form id="edit" onSubmit={this.editProfile.bind(this)}>

					{ this.userData().map( (usersData)=>{
						return <ProfileCandidateForm key={usersData._id} user={usersData}/>
					  }) 
					}
					 
				   <div className="form-group col-lg-12 col-md-4 col-xs-12 col-sm-12 noPadLR">
					    <input type="submit" value="Update" className="btn btn-primary col-lg-4 col-lg-offset-4"/>
				    </div>
 
			  </form>	    
	   );

	} 

}

Child component ‘ProfileCandidateForm’ :

import React, { Component} from 'react';
import { Meteor } from 'meteor/meteor';

export default class ProfileCandidateForm extends Component {

  render() {
    return (
		    <div className="form-group col-lg-5 col-md-4 col-xs-12 col-sm-12 ">
			   <label className="signupLabel control-label">User Name*</label>
			   <input type="text" className="form-control" ref="username" defaultValue={this.props.user.username} />
		    </div>
    );
  }
}

Any help is appreciated!

Hmmm…

I don’t recognise that pattern of loading data. Generally, data should be loaded using createContainer or Komposer, which will allow data to be fed into your component as a prop, at which point you can render it on your UI or wire it up to a method.

Also, I believe it is best (probably necessary) to have your constructor at the top (i.e. - before you define your userData method)

Ok, constructor seems to be at the top now :S

Anyway, don’t have much experience with tracker, but, if it is similar to createContainer, then you will need to wait for the subscription to be ready before data is displayed.

Something along the lines of my code above: Loading react with initial data/user-side settings page

OK. Let me try this. Thank you.

Added ‘react-meteor-data’ using command ‘meteor add react-meteor-data’. And then added line’ import { createContainer } from ‘meteor/react-meteor-data’; ’ at the top of the file.

Then also at console I am getting error => modules-runtime.js?hash=8587d18…:231 Uncaught Error: Cannot find module ‘meteor/react-meteor-data’.

Hello,
Your post helped me a lot. Finally have a code, Just wants to make sure is it correct? Thank you so much. Now I can work on edit part.

UPDATE: FindOne will not be available initially so we need to handle it. Its working for me now.

import React, {Component} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
import {PropTypes} from 'prop-types';
import {Meteor} from 'meteor/meteor';

//db
import {ParkingSlots} from '/imports/addressVerification/api/verificationAddress.js';

class Print extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data : this.props.post,
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps.post);
            this.setState({
                id      : nextProps.post._id,
                owner   : nextProps.post.owner,
                street1 : nextProps.post.street1,
            })
    }

    render(){
        console.log(this.props);
        console.log(this.props.loading);

        if(!this.props.loading){
        return(
            <div>

                    {/* It will need 'componentWillReceiveProps'
                   {this.state.id} &nbsp;
                   {this.state.owner} &nbsp;
                   {this.state.street1} &nbsp;
                   */}

                   {/* This will take data  directly from props*/}
                   {this.props.post._id}
                   {this.props.post.owner}
                   {this.props.post.state}
                   {this.props.post.city}
                   {this.props.post.zip}

            </div>
        );
        }else{
            return (<h1>loading...</h1>);
        }
    }
}
PostContainer = createContainer((props)=>{
    const postHandle = Meteor.subscribe('parkingSlots');
    const post = ParkingSlots.findOne({'owner':Meteor.userId()});
    const loading = !postHandle.ready();

    return {
        loading,
        post,
    };
}, Print);

export default PostContainer;
import React, { Component} from 'react';
import { render } from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import ProfileCandidateForm from './ProfileCandidateForm.jsx';

export default class App extends TrackerReact(Component) {
	constructor(props){
		super(props);
		this.state = {
			subscription : {}
		};
                this.editProfile = this.editProfile.bind(this)
	}
  componentWillReceiveProps(nextProps) {
                        const subscription = 
			this.setState({
				subscription
			})
	}
  editProfile(event){
    event.preventDefault();
    var doc = {
	            username   : this.refs.username.value,
             }

    console.log(doc);
  }

	userData(){
		var userId  = Meteor.userId();
		return Meteor.users.find({'_id': userId}).fetch();
	}

	render(){
	   console.log(this.userData());	
       return(
			  <form id="edit" onSubmit={this.editProfile.bind(this)}>

					{ this.userData().map( (usersData)=>{
						return <ProfileCandidateForm key={usersData._id} user={usersData}/>
					  }) 
					}
					 
				   <div className="form-group col-lg-12 col-md-4 col-xs-12 col-sm-12 noPadLR">
					    <input type="submit" value="Update" className="btn btn-primary col-lg-4 col-lg-offset-4"/>
				    </div>
 
			  </form>	    
	   );

	} 

}

Looks good (nothing out of place from what I can see!)

Thank you.
Getting console as -

Warning: EditVerifiedAddr is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Ah right.

Yup your input’s value needs to be controlled (so, set by state) - then have a setState function fire on the onChange

So your input should have:

value={this.state.inputValue}
onChange{this.state.onInput}

With the onInput function bound to ‘this’ in your constructor, and:

onInput(event){
  this.setState({inputValue: event.target.value})
}