Inline CSS Styles in React: Adding random variable

Question

I'm trying to get the animation on .skill-logo to start playing at random times for each version.

React needs inline styles to be passed as an object. Which is what I have done here. Any ideas as to where to assign the randomness?

const Skills = () => {
    let skillLogoStyle = {
        animationDelay: Math.random() + 's',
    };
    return (
        <Row className="skills-container">
            <Col xs={12} mdOffset={2} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={html} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={css} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={js} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={react} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={node} alt="HTML5 Logo"/></Col>
        </Row>
    );
}

Answer 1

You could try creating a function that will return a random animationDelay and then call it for each element in render.

returnRandom = () => {
    let random = Math.random()*10;
    return {animationDelay: Math.random() + 's'}

and then in render set style to that function

<Col style = {returnRandom()}

Then each would have a different animation delay, which is what I am assuming you want.