eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.44k stars 145 forks source link

Unique keys are removed #105

Closed ACPrice closed 6 years ago

ACPrice commented 6 years ago

I'm getting the react warning:

Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

When I inspect the children rendered within the masonry component, I don't see a key prop.

Here's how I'm implementing:

class Container extends Component {
  render() {
    const { masonryStyle } = this.props
    const masonryContainerStyle = { position: 'relative', width: '595px', display: 'block', margin: 'auto' }
    const masonryOptions = { itemSelector: '.item', columnWidth: 200, gutter: 20, containerStyle: masonryContainerStyle }

    const Items = list.map((item, index) => (
      <Item key={index} className={'saved-item'} item={item} />
    ))

    return (
      <Inner>
        {masonryStyle ? (
          <Masonry options={masonryOptions}>
            {Items}
          </Masonry>
        ) : (
          <div>
            {Items}
          </div>
        )}
      </Inner>
    )
  }
}

Is this a known issue with keys getting removed? Am I doing something wrong?

ACPrice commented 6 years ago

Gonna go ahead and close this. It was an issue on my end. Thanks for providing this tool!