CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
matiii
matiii

Reputation: 326

React material-ui, grid list cannot render grid items

export interface FlatsGridProps {
    flats: IClusterFlats[];
}

export const FlatsGrid: React.StatelessComponent<FlatsGridProps> = (props: FlatsGridProps) => {

        if (props.flats.length === 0) {
            return (<div> empty </div>);
        }

        return (
            <div style={styles.root}>
                <GridList
                    cols={2}
                    style={styles.gridList}
                    cellHeight={180}>
                    {props.flats.map((f, i) => {
                        <div key={i}> element </div>
                    })}
                </GridList>
            </div>
        )
    };

When I render GridList control it throws exception

Cannot read property 'props' of null in GridList.js

View from console below.

console log

Upvotes: 0

Views: 1056

Answers (1)

Panther
Panther

Reputation: 9408

I think you need to return the child from the map. The grid.js complains about its child being undefined.

 <GridList
   cols={2}
   style={styles.gridList}
   cellHeight={180}>
   {props.flats.map((f, i) => {
     return (<div key={i}> element </div>)
   })}
 </GridList>

Upvotes: 2

Related Questions