Lazy loading example throws typescript error

[jordanlambrecht]

Small thing, but typescript will throw an error on the following line:

const [animationData, setAnimationData] = useState();

simple solution is to add a null to the initial useState:

const [animationData, setAnimationData] = useState(null);

[mifi]

why does animationdata need to be null? undefined is an accepted value too

[jordanlambrecht]

That would work too. Typescript just needs an initial value to not get angry

[mifi]

if the typescript definition problem lies in react-lottie-player, then I'm happy to accept a PR to fix the definitions

[jordanlambrecht]

No need for a PR even. Just the example listed in the README needs 'undefined' or 'null' added to the useState.

[mifi]

ah, but what I meant is that undefined should also be acceptable, so I don't think we should force users to use null. Probably the error you're getting is due to something wrong with our type script definitions file and should be solved there instead: https://github.com/mifi/react-lottie-player/blob/master/src/index.d.ts
although i'm not an expert in TS

[saurabhmehta1601]

I guess since there are no typedefinitions available for the react-lottie-player package . It is better to assign the type for animationData as any . As shown below

const MyComponent = () => {
  const [animationData, setAnimationData] = useState<any>();

  useEffect(() => {
    import('./animation.json').then(setAnimationData);
  }, []);

  if (!animationData) return <div>Loading...</div>;
  return <Lottie animationData={animationData} />;
}

[saurabhmehta1601]

Small thing, but typescript will throw an error on the following line:

const [animationData, setAnimationData] = useState();

simple solution is to add a null to the initial useState:

const [animationData, setAnimationData] = useState(null);

Can you please post a screenshot of warning .
I suppose typescript should show warning as long as you don't use any . Since neither undefined and Module have compatible types not null and Module

[jpwallace22]

Knowing that we are going to have JSON object as our state, it would probably be best to simply use object instead of any. I know a lot of people don't allow the use of any in their codebases. (or at least are VERY strict on it)

const MyComponent = () => {
  const [animationData, setAnimationData] = useState<object>();

  useEffect(() => {
    import('./animation.json').then(setAnimationData);
  }, []);

  if (!animationData) return <div>Loading...</div>;
  return <Lottie animationData={animationData} />;
}