Hello there, i am trying to follow the level up meteor tutorial with the use of createContainer instead of TrackerReact. i came across some problems while doing so and i would need some help clarifying things in my head lol.
first of all, i tried to put the createContainer wrapper inside its own .jsx in imports/containers/AppContainers.jsx and inside that file i imported my page component App from imports/ui/pages/App.jsx.It worked but when i tried to pass down the reactive data as props i couldnt so i decided to get rid of the container folder and instead do it all in the App.jsx file with the following structure:
-App class definition
-App proptypes definition
-createContainer definition
now the thing is that it first Render my react page witthout the datas and re-renders it with it.if i do not use the ternary operator on my variables that have reactive datas i get an error as they arent data in it to display.
i figured it was because i put createContainer after the class definition but when putting it above it it gets worse…
how can i get rid of that issue?
here is the code
`import React,{Component,PropTypes} from ‘react’;
import {Resolutions} from ‘…/…/api/resolutions’;
import {createContainer} from ‘meteor/react-meteor-data’;
export default class App extends Component{
addResolution(e){
e.preventDefault();
let resolution=this.refs.resolution.value.trim();
Resolutions.insert({
text:resolution,
complete:false,
createdAt: new Date()
});
this.refs.resolution.value='';
}
resolutions()
{
return this.props.resolutions;
}
render(){
let res= this.resolutions();
console.log(res);
return(
<div>
<h1>My Resolutions</h1>
<form action="" onSubmit={this.addResolution.bind(this)} className="new-resolution">
<input
type="text"
ref="resolution"
placeholder="Enter a resolution"
/>
</form>
<div>
{res.length>0?res[0].text:''}
</div>
</div>
);
}
}
//cree un container pour passer les infos de la base de donne de facon reactive
App.propTypes={
resolutions:PropTypes.array.isRequired
};
export default createContainer(()=>{
return{
resolutions:Resolutions.find({}).fetch()
};
},App);
`
Thanks