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);
Source: stackoverflow.com
Related Query
- Populate Meteor React form with existing data
- Meteor React populate form with existing data
- Populate a React form with data if it exists
- React with Firebase - submitting Formik form data
- react native post form data with object and file in it using axios
- Best way to submit FORM data with React Redux?
- react formik - fill form inputs with data after http request
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- Unit test form submission with data using react testing library
- Uploading image with form data in React
- React - Axios POST form data with files and strings
- Rendered more hooks than during the previous render. when posting form data with React Hooks
- React with Antd Form onFinish not retrieve data
- How to send form data with react
- React useEffect(), fetch data with React Hooks and set the formik form
- I am using React Hook Form with Typescript, string does not accept incoming data
- Storing React form data in a nested object with useState
- Request failed with status code 500 error. When making form post of multiForm data in React
- React - using nested objects as state with hooks to fill form data
- Submit a form with data using a custom React hook
- Sending form data with react Router from a Component to another
- Two-Way Data Binding With Meteor and React
- fetch request with form data for auth react
- Console.log data entered in a form with React js
- React form not filling out with fetched data
- Writing data from form to local JSON file with React
- failed to send and recieve form data object with react and nodejs
- React native + redux populate store with data before any Component render
- axios GET request with form data in React JS
- I want to get form data in Ul li with the .map method react js
More Query from same tag
- How does React update a component and its children after a state change?
- When storing a component in state, it no longer re-renders when its props are changed?
- Blob URL upload to firebase storage
- React-router clickable elements inside Link
- Fetch method returning undefined in React
- How to filter object based on many values
- Input text overlapping buttons inside input field
- Reactjs unexpected infinite loop with render
- Smoothness between showing more and showing less
- I am changing the state of the REACT component from another component but no refresh
- Use string paths to images instead of requires when resolving img src and background-image urls
- Chakra UI : The background does not dim when the drawer opens
- How to rerun a function (that runs when component is mounted) when the redux store is changed?
- Unable to grab the ID generated by firebase when converting to array
- Apollo boost - __typename in query prevent new mutation
- How to make API call (CRUD) on React JS
- Calling other action on the basis of results of other action in React JS
- show 1 or the other 2 options in select menu react
- Is it possible to show all <select> <option>s as a toggle?
- TypeError: Cannot read property 'map' of undefined in ProductList.js
- MUI: BottomNavigationAction override label styles
- Use JSON database with Node & React
- Preventing unnecessary rendering with React.js
- In React, what is the function of the key attribute in html tag
- Pagination numbers not visible in reactjs
- Can someone explain me the difference between both this if conditions in React?
- React : Delete item from array
- How to make some columns align left and some column align center in React Table - React
- Axios Post method authorization does not work - React
- React - How can I let visitors use react dev tools but can not edit states and props