Ok, this will become your wrapper component:
import ChangeHero from "..."
import React from "react";
import React, {Component} from 'react';
import { Heroes } from '../../api/heroes.js';
import { createContainer } from 'meteor/react-meteor-data';
class ChangeHeroWrapper extends React.Component {
render(){
if(this.props.loading){
return(
<ChangeHero hero={this.props.hero}/>
)
} else{
// maybe insert a loading component for better UI
}
}
}
export default createContainer((params) => {
const subHandle = Meteor.subscribe("heroes");
const loading = subHandle.ready();
return {
loading: loading,
hero: Heroes.findOne({_id: params.heroId}) || {}
}
}, ChangeHeroWrapper);
Notice that you have to subscribe to your Meteor publication in the container. When the subscription is loaded, it will be passed to the ChangeHero component and no matter when you refresh, the data will be loaded appropriately. I don’t know what your subscription is called or if you need a loading component, so you can add or remove as you wish.
Your ChangeHero component will look something like this:
import React, {Component} from 'react';
import { Meteor } from 'meteor/meteor';
import Dropzone from 'react-dropzone';
import { FormGroup, Input, Form, Col, Row,
Card, CardTitle, CardBlock, CardImg, Button, Label } from 'reactstrap';
class ChangeHero extends Component {
constructor(props) {
super(props);
this.state = {
hero: {}
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(propertyName, event) {
}
handleSubmit(event) {
}
// this.setState({hero: this.props.hero})
render() {
//console.log(this.state.hero);
const styles = {
dropZone: {
padding: '30px',
margin: '5px',
transition: 'all 0.5s',
borderWidth: '2px',
borderColor: 'black',
borderStyle: 'dashed',
borderRadius: '4px'
}
}
return (
<Col sm={{ size: 10, offset: 1 }}>
<Card block>
<CardTitle>Change Hero info</CardTitle>
<Form onSubmit={this.handleSubmit}>
<Row>
<Col md="4">
<Dropzone style={styles.dropZone} onDrop={this.onDrop} accept="image/*" multiple={false}>
<div>Hero image here, try dropping some files here, or click to select files to upload.</div>
</Dropzone>
</Col>
<Col md="8">
<FormGroup>
<Label for="name">Name</Label>
<Input
id="name"
name="name"
value={this.props.hero.name ? this.props.hero.name : ''}
onChange={this.handleChange.bind(this, 'name')}
type="text"
placeholder="Hero's name" />
</FormGroup>
<FormGroup>
<Label for="universe">Universe</Label>
<Input
id="universe"
name="universe"
value={this.props.hero.universe ? this.props.hero.universe : ''}
onChange={this.handleChange.bind(this, 'universe')}
type="text"
placeholder="Hero's universe" />
</FormGroup>
</Col>
</Row>
<FormGroup>
<Label for="description">Description</Label>
<Input
id="description"
name="description"
value={this.props.hero.description ? this.props.hero.description : ''}
onChange={this.handleChange.bind(this, 'description')}
type="textarea"
placeholder="Hero's description" />
</FormGroup>
<Button color="primary" type="submit">Change</Button>
</Form>
</Card>
</Col>
);
}
}