score:0

Accepted answer

i found the answer buried deep on the meteor forum site. findone is not available when the page first loads as a result it errors. to fix this you have to return an empty object. to populate the form you need to load the prop in the parent file app.jsx and pass the prop over to the child file profilecandidateform.jsx.

component child: 'profilecandidateform.jsx`

import react, { component, proptypes } from 'react';
import { meteor } from 'meteor/meteor';

import { profilecandidate } from '../api/profilecandidate/profilecandidate.js';


export default class profilecandidateform extends component {
  constructor(props) {
    super(props);

    var profilecandidate = this.props.profilecandidate;
    var firstname = profilecandidate && profilecandidate.name && profilecandidate.name.first;
    var lastname = profilecandidate && profilecandidate.name && profilecandidate.name.last;

    this.state = {
      firstname: firstname,
      lastname: lastname,
    };

    this.handlechange = this.handlechange.bind(this);
    this.handlesubmit = this.handlesubmit.bind(this);
  }

  handlechange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setstate({
      [name]: value
    });
  }

  render() {
    return (
      <form onsubmit={this.handlesubmit.bind(this)}>
        <label>
          name:
        </label>
        <input
          type="text"
          name="firstname"
          value={this.state.firstname}
          onchange={this.handlechange}
          placeholder="first name"
        />
        <input
          type="text"
          name="lastname"
          value={this.state.lastname}
          onchange={this.handlechange}
          placeholder="last name"
        />
        <input
          type="submit"
          value="submit"
        />
      </form>
    )
  }
}

profilecandidateform.proptypes = {
  profilecandidate: proptypes.object.isrequired,
}

component parent: 'app.jsx`

import react, { component, proptypes } from 'react';
import reactdom from 'react-dom';
import { meteor } from 'meteor/meteor';
import { createcontainer } from 'meteor/react-meteor-data';

import { profilecandidate } from '../../api/profilecandidate/profilecandidate.js';

import profilecandidateform from '../profilecandidateform.jsx';

class app extends component {
  constructor(props) {
      super(props);

      this.state = {
        hidecompleted: false,
      };
    }

  renderprofilecandidateform() {
    let profilecandidate = this.props.profilecandidate;
    return (
      <profilecandidateform
        key={this.props.profilecandidate._id}
        profilecandidate={profilecandidate}
      />
    )
  }

    render() {
      return (
        <div classname="container">
          {this.renderprofilecandidateform()}    
        </div>
      );
    }
}

app.proptypes = {
  profilecandidate: proptypes.object.isrequired,
};

export default createcontainer(() => {
  meteor.subscribe('profilecandidate');


  return {
    profilecandidate: profilecandidate.findone({userid: meteor.userid()}) || {},
  };
}, app);

Related Query

More Query from same tag