react-lottie, unable to pass props for animationData

Question

i'm new to using react-lottie and I'm trying to build a class component to allow me to pass in a path to a .json file and a href link. I'm about to pass the link through props, but I'm having difficulty passing the the path and getting the following error:

Parsing error: Unexpected token, expected ";"

import React, { Component } from 'react';
import Lottie from 'react-lottie';

class SocialLinks extends Component {
    state = { isStopped: false };

    render() {

        const defaultOptions = {
            loop: true,
            autoplay: false,
            animationData: { this.props.icon },
            rendererSettings: {
                preserveAspectRatio: 'xMidYMid slice'
            }
        };

        return (
            <span
                className="Social_links"
                onMouseEnter={() => this.setState({ isStopped: false })}
                onMouseLeave={() => this.setState({ isStopped: true })}
            >
                <a href={this.props.link}>
                    <Lottie
                        options={defaultOptions}
                        isStopped={this.state.isStopped}
                        width={40}
                    />
                </a>
            </span>
        );
    }
}

export default SocialLinks;

Answer 1

You don't need the double braces.

use:

animationData: { this.props.icon }

or

animationData: { icon : this.props.icon }