React re-rendering with use of ternary operator,why?


#1

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


#2

i think ill just test to see if the data is available first if not ill return a loading gif or text.