metafizzy / metafizzy/packery

Packery on React

Open
#519 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.3k
Forks
324
PR merge metrics
No merged PRs in 30d

Description

Hi David,
I love your work. Trying to use Packery in React via https://github.com/eiriklv/react-packery-component . Got it very close but am getting a TypeError. And I am using a different pattern than he has in github. I am holding the array object in state and rendering it by calling renderData().

```
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 Packery from 'packery'
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'

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) => (


{item.sku}
{item.name}

))
: null
}

render() {
return (





Name:







{this.renderData()}

{/* {this.renderData()} */}


);
}
} // END

export default App
```

Contributor guide

Open the contributing guide

Research direction

Start with the App component, especially updateData, renderData, and the commented Packery integration, and compare its state-driven rendering with react-packery-component. Reproduce the TypeError using the supplied CSV and React pattern, then identify the failing entry point. Done requires a clearly identified cause and a verified correction, but the issue does not include the error message or a test path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.