Get collection data and display it to Material UI using react

react
1

hi, Developing app in react and Material-ui.
Just added Material-ui from meteor npm install material-ui
and added react,react-dom , react-meteor-data, addons. I have not added more.
Problem is can not fetch data from collection inside the Material-UI Component.. but i can fetch outside of Material-UI Component. What have I missed?

2

It’s difficult to help without seeing code. Can you share some code that shows the issue you’re having?

3

yeah.
ListLeave.jsx

class ListLeave extends Component {
    renderLeave() {
     return this.props.col_leave.map((leave) => (<Leave key={leave._id} leave={leave}/>));
    }
    render() {
        return<div>

        <MuiThemeProvider muiTheme={muiTheme}>
            <Tabs >
                <Tab  style={{backgroundColor:cyan300}}   label="All" >
                    <div>
                        <h2 style={styles.headline}>All Leave List</h2>
                        <ul>
                            {this.renderLeave}
                        </ul>
                    </div>
                </Tab>
            </Tabs>
                </MuiThemeProvider>
            </div> ;
    }
}

ListLeave.propTypes = {
    col_leave: PropTypes.array.isRequired,
};

export default createContainer(() => {
  Meteor.subscribe("col_leave");
    return {col_leave: CollectionLevae.find({}).fetch()};
}, ListLeave);

export default class Leave extends Component {
  render() {
    return (
      <li className="list-group-item list-group-item-success"><b>Reason</b>:{this.props.leave.reason}</li>
    );  }}

Leave.propTypes = {
  // This component gets the task to display through a React prop.
  // We can use propTypes to indicate it is required
  leave: PropTypes.object.isRequired,
};
//Kadira flow rowter with react-mounter
export const LeaveList = (param) => (
    <div className="at-form">
        <ListLeave/>
    </div>
);

Browser Console Error: Warning: Failed propType: Required prop col_leave was not specified in ListLeave. Check the render method of LeaveList.

4

A few things:

  1. Can you adjust your post so that you enclose your code samples in 3 backticks, like:
    ```
    your code here
    ```
    This will fix the code formatting.

  2. The console error you provided refers to a LeaveList component. Your code samples don’t show this component, but instead show a ListLeave component. Was this just a typo made when you were adding the code samples into this post?

5

hi, adjusted my code. LeaveList and ListLeave both are here

6

Based on your code sample, the error you’re seeing makes sense. Your LeaveList component is referencing your ListLeave component directly. That means your createContainer function is never called, which means your col_leave property isn’t initialized or passed into ListLeave. To fix this you’ll want to make sure your createContainer function is called before you reference your ListLeave component.

One more quick note - using LeaveList and ListLeave for component names isn’t a good idea. It’s very easy to get the two names mixed up, which could lead to headaches later on down the debugging road. I’d recommend differentiating these names a bit further.

7

thank you hwillson… I Just call ListLeave Now its working perfectly and renamed all…