I have a React container which collects data, then passes it (and props) to a React component and so on. How do I get props from the higher level container/components into lower level container/components:
In this example, I have a locale
field in the records of the UsersExtraColl collection that I want passing all the way down to the ListTable
component:
Flowrouter.route('/', {
action: function(params, queryParams) {
ReactLayout.render(AppWrapperLoggedInContainer, {content: <List />});
}
});
AppWrapperLoggedInContainer:
export default createContainer(({ params }) => {
const dataHandle = Meteor.subscribe('UsersExtraPub');
const dataIsReady = dataHandle.ready();
return {
dataIsReady,
data: dataIsReady ? UsersExtraColl.find().fetch() : []
};
}, AppWrapperLoggedIn);
AppWrapperLoggedIn:
export default class AppWrapperLoggedIn extends React.Component {
constructor(props) {
super(props);
}
render(){
if (!this.props.dataIsReady) {
return (
<div>
<div>Loading...</div>
</div>
)
}
else {
return (
<div>
...
{this.props.content}
...
</div>
)
}
}
}
List:
export default class List extends React.Component {
render(){
return (
<div>
<ListTableContainer />
</div>
)
}
}
ListTableContainer:
export default createContainer(({ params }) => {
const dataHandle = Meteor.subscribe('ListsPub');
const dataIsReady = dataHandle.ready();
return {
dataIsReady,
data: dataIsReady ? ListsColl.find().fetch() : []
};
}, ListTable);
ListTable:
export default class ListTable extends React.Component {
console.log(this.props){
render(){
...
}
}
In ListTable
, this.props
does not contain the locale
information.