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

you can set null to style attribute if animateLight is false like <Component style={animateLight ? styles : null} /> — Vivek
– Vivek, Commented Sep 21, 2020 at 12:50

Krishna Vamsi · Accepted Answer · 2020-09-21 12:52:00Z

2

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} />

answered Sep 21, 2020 at 12:52

Krishna Vamsi

1564 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

conditionally add attribute (style) to react element

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related