conditionally add attribute (style) to react element

Question

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>
        );
    }
}

Answer 1

You can do something like this

const styleProps = !animateLight ? {} : { style: { transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` } };

<img {...styleprops} />