Making my NextJs application crash #148
Description
Hi ! Can anyone show me how the go through this error ? I'm using this package in a NextJs app and get this error :
React does not recognize the columnsCount prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase columnscount instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Here's what the code looks like :
`
const MasonryImages = () => {
const [images, setImages] = useState<FileType[]>([])
useEffect(() => {
fetch('/api/pets-images').then(async (response) => {
if (response.ok) {
const images = await response.json()
setImages((images as FileType[]).filter((file) => {
return imagesExtensions.includes(file.ext)
}))
}
})
}, [])
return (
<ResponsiveMasonry
columnsCountBreakPoints={{ 0: 1, 320: 3, 900: 4 }}
>
<div className={style.masonry} >
<Masonry gutter='10px' className={style.masonry} >
{images.map((image) => {
return <Image src={getFileUrl(image.name)} height={400} width={400} alt={image.name} key={image.name} className={style.image} />
})}
</Masonry>
<div className='center'>
<Link href='/store/pets' className={style.cta}>
<span className='center'><Dog size={18} /></span>
<span>Visitez notre animalerie</span>
</Link>
</div>
</div>
</ResponsiveMasonry>
)
}`