Lottie-web: React Lottie Error: <svg> attribute width: Expected length, "undefined".

[yannieyeung]

Hi, I am having a problem with render the animation. Please refer to screenshot for exact error message. I am using react and rails for this project.
What i wanted to do is getting the JSON data from database/api, and pass as props to a component and then rendering it. Appreciate if anyone could help me with this. Thank you. This is my code in my component:

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

function Anim(props) {
  const container = useRef(null);
  const animationDataVar = props.code;
  useEffect(() => {
    lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: animationDataVar,
      rendererSettings: { preserveAspectRatio: "xMidYMid slice" },
    });
  }, []);

  return (
    <div>
      <div className="container" ref={container}></div>
    </div>
  );
}

export default Anim;

[bodymovin]

hi, seems that the json is incorrect. Do you hav a link with a working example?

[yannieyeung]

Hi, I am sorry my link is not working because of this issue, nothing gets rendered. Is it ok if u take a look at my repo instead? My repo is https://github.com/yannieyeung/SEI-Project4-Design-sharing-App. Thank you!

[yannieyeung]

Hi, the prob is solved. I need to JSON parsed it first, ie. const animationDataVar = JSON.parse(props.code);