0

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;
Harsh Desai
  • 11
  • 2

1 Answers1

1

You don't need the double braces.

use:

animationData: { this.props.icon }

or

animationData: { icon : this.props.icon }
Kylo Ren
  • 8,551
  • 6
  • 41
  • 66
  • I tried animationData: { this.props.icon } but got the issue: Parsing error: Unexpected keyword 'this'. So I took out the 'this' and got an error: Parsing error: Unexpected token, expected "," [expected { props.icon }, where is . is] I also tried { icon : this.props.icon }, and it didn't load anything – Harsh Desai Sep 16 '20 at 13:32
  • @HarshDesai why did you change the code? you should post that as an updated. Also now you have changed "defaultOptions " as a function instead of an object. what exactly do you need? I have checked the react-lottie examples , the options is a object not function. https://github.com/chenqingspring/react-lottie/blob/master/src/stories/lottie-control.js – Kylo Ren Sep 16 '20 at 17:09
  • sorry you're right. I should have done it as an update. I thought my changing it to a function would have helped with passing the props. I will change it back to what I previously had. – Harsh Desai Sep 16 '20 at 18:10
  • do you think it would be easier to pass the entire obj as a prop rather than the different attributes? – Harsh Desai Sep 16 '20 at 18:15
  • @HarshDesai now what problem are you facing with the current code ? – Kylo Ren Sep 16 '20 at 18:57
  • I can't pass the path to the json file to animationData: { this.props.icon } – Harsh Desai Sep 16 '20 at 19:11
  • @HarshDesai well looking at the examples of that lib, i'm not surprised. there is some JSON data is being passed to as animationData in those example, are you passing the same in the icon prop? – Kylo Ren Sep 16 '20 at 19:47
  • @HarshDesai look at https://github.com/chenqingspring/react-lottie/blob/master/src/stories/pinjump.json – Kylo Ren Sep 16 '20 at 19:48
  • Yea, I have a json file for an animation of my own. I'm trying to pass the path to the file in the animationData. I have 8 different json files, I have been able to build the lottie components for each one individually, but I rather just have 1 component and pass the different href and file as props. – Harsh Desai Sep 16 '20 at 23:54
  • @HarshDesai this is not possible, if the component is expecting the data, it means you need to import the data and pass to the component. a path will not work. check for if exist and prop which accepts the paths. – Kylo Ren Sep 17 '20 at 07:59