Packery on React
- 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
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