Is it possible to add style attribute in my for loop conditionally. This style is adding to my element immediatelly after the component is mounted but I want this attribute to add only if animateLight is true which is this.props
class Main extends Component {
render() {
const {animateLight} = this.props;
const points1 = [];
const points2 = [];
const points3 = [];
for (let i = 0; i < 10; i++) {
points1.push( <img src={point1} key={i}
className={animateLight ? styles.pointsAppear : styles.points }
style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
alt="point"/>)
points2.push(<img src={point2}
className={animateLight ? styles.pointsAppear : styles.points}
style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
alt="point"/>)
points3.push(<img src={point3}
className={animateLight ? styles.pointsAppear : styles.points}
style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
alt="point"/>)
}
return (
<div className={styles.containerMain}>
<div className={styles.smallContainer}>
<div className={cx(styles.motivContainer, { [styles.animateText]: animateLight})}>
<p className={styles.motivText}>
...
</p>
</div>
<div className={styles.bulb}>
<img src={bulbLight}
className={cx(styles.motivImgLight,
{[styles.lightAnimation]: animateLight}
)}
alt="web idea" />
{points1}
{points2}
{points3}
</div>
</div>
</div>
);
}
}
