Getting a TypeError probably because of calling function rather than parameter

[dylannirvana]

Hi Eirik,
I love Packery and Draggabillly. Thanks for hooking this up with React. I am having some problems connecting them however. The object I am iterating over is in a function call rather than a like the pattern you used. Can you help me make this work? Thank you so much!!

import React, { Component } from 'react'
    import { 
        Card, 
        CardImg, 
        // CardText, 
        CardBody,
        CardTitle, 
        // CardSubtitle, 
        // Button, 
        Input, 
        InputGroup, 
        // Collapse, 
        // Navbar, 
        // NavbarToggler, 
        // NavbarBrand, 
        // Nav, 
        // NavItem, 
        // NavLink, 
        Container, 
        Row, 
        // Col, 
        Jumbotron 
        } from 'reactstrap';
    import Papa from 'papaparse'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import './App.css'
    // import Packery from 'react-packery-component'

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {data: [] };   
            this.handleChange = this.handleChange.bind(this);
            this.updateData = this.updateData.bind(this)
        }
        
        handleChange(event) {
            event.preventDefault()
            const inventory = event.target.files[0]
            Papa.parse(inventory, {
                header: true,
                complete: this.updateData
            })
        } // END

        updateData(results) {
            const data = results.data
            console.log(data)
            this.setState({data}) // I have it in state. How to get it in UI?
        }
        
        renderData() {
            return  this.state.data.length > 1 
               ? this.state.data.map((item) => (
                   <Card key={item.sku} >  
                        <CardImg src={item.image} />
                        <CardTitle> {item.sku} </CardTitle>
                        <CardBody> {item.name} </CardBody>
                   </Card>

                // // PACKERY
                //    <Packery key={item.sku}>
                //         <Card >  
                //             <CardImg src={item.image} />
                //             <CardTitle> {item.sku} </CardTitle>
                //             <CardBody> {item.name} </CardBody>
                //         </Card>
                //    </Packery>
               )) 
               : null         
        }

        render() {
            return (
                <div>
                    <Jumbotron>
                        <form >
                            <InputGroup>
                                Name:
                                <Input type="file" onChange={this.handleChange} />
                            </InputGroup>
                        </form>
                    </Jumbotron>
                    
                    <div className="album">
                        <Container>
                                <Row> {this.renderData()} </Row> 
                        </Container>
                    </div>
                   
                </div>          
            );
        }
    } // END

    export default App