I’m new to React and am trying to animate some elements from an array using the ReShake.js library. Here’s my code:
import { ShakeHorizontal } from 'reshake'
const state = {
invalidWordSubmitted: true,
}
const isInvalidWordSubmitted = () => {
return state.invalidWordSubmitted ? '.invalidWordSubmitted' : ''
}
// here is the bit that I think is causing the problem:
<div id="gameBoard" className="gameBoard">
{board.map((row, rowNumber) =>
row.map((letter, colNumber) => (
<span
key={colNumber}
className={`${getCellStyles(
rowNumber,
colNumber,
letter
)} letterTile`}
>
<ShakeHorizontal trigger={`${isInvalidWordSubmitted()}`}>
{letter}
</ShakeHorizontal>
</span>
))
)}
</div>
It works ok, but there is serious lag in the browser, and the console shows me the following warning: react_devtools_backend.js:4045 Over 200 classes were generated for component styled.div with the id of "sc-bdvvtL"
Should I be adding unique ids to each of the iterated <ShakeHorizontal>
components?
I couldn’t find anything in the docs: https://github.com/elrumordelaluz/reshake/tree/master/src