Error in react-spring with typescript for react

Question

I'm trying to make an animation using react-spring, but when I go to call the useTransition function passing the properties of some kind of errors I'm not understanding

import React from 'react';
import { useTransition } from 'react-spring';
import { Container } from './styles';
import { ToastMessage } from '../../hooks/toast';
import Toast from './Toast/index';

interface ToastContainerProps {
  messages: ToastMessage[];
}

const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
  const messageWithTransitions = useTransition(
    messages,
    message => message.id,
    {
      from: { right: '-120%' },
      enter: { right: '0%' },
      leave: { right: '-120%' },
    },
  );
  return (
    <Container>
      {messageWithTransitions.map(({ item, key, props }) => (
        <Toast key={key} message={item} />
      ))}
    </Container>
  );
};

export default ToastContainer;

Error:

No overload matches this call. Overload 1 of 3, '(data: OneOrMore, props: () => { ref?: SpringRef<Lookup> | undefined; from?: TransitionFrom; ... 23 more ...; onDestroyed?: ((item: ToastMessage, key: Key) => void) | undefined; } | (object & {}), deps?: any[] | undefined): [...]', gave the following error. Argument of type '(message: any) => any' is not assignable to parameter of type '() => { ref?: SpringRef<Lookup> | undefined; from?: TransitionFrom; loop?: LoopProp<ControllerUpdate<Lookup, undefined>> | undefined; ... 22 more ...; onDestroyed?: ((item: ToastMessage, key: Key) => void) | undefined; } | (object & {})'. Overload 2 of 3, '(data: OneOrMore, props: { ref?: SpringRef<Lookup> | undefined; from?: TransitionFrom; ... 23 more ...; onDestroyed?: ((item: ToastMessage, key: Key) => void) | undefined; } | (object & {}), deps: any[] | undefined): [...]', gave the following error. Argument of type '{ from: { right: string; }; enter: { right: string; }; leave: { right: string; }; }' is not assignable to parameter of type 'any[]'. Object literal may only specify known properties, and 'from' does not exist in type 'any[]'. TS2769

 const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
const messageWithTransitions = useTransition(
                                   ^
     messages,
    message => message.id,

Answer 1

I was having the same issue, since I'm doing the bootcamp too. I don't know if you've already solved the issue, but I'll paste the solution here:

import React from 'react';
import { useTransition } from 'react-spring';

import Toast from './Toast';

import { ToastMessage } from '../../hooks/toast';
import { Container } from './styles';

interface ToastContainerProps {
  messages: ToastMessage[];
}

const ToastContainer: React.FC<ToastContainerProps> = ({ messages }) => {
  const messagesWithTransitions = useTransition(messages, {
    keys: (message) => message.id,
    from: { right: '-120%' },
    enter: { right: '0%' },
    leave: { right: '-120%' },
  });

  return (
    <Container>
      {messagesWithTransitions((style, item, t) => (
        <Toast key={t.key} style={style} message={item} />
      ))}
    </Container>
  );
};

export default ToastContainer;

You can read about the changes in useTransition hook here, if you want: Breaking Changes