React-Spring: неверный вызов крюков

Question

Я пытаюсь выучить React-Spring. Один из кодов, представленных в документации, выдает ошибку при запуске. Есть идеи, что может быть не так? Как ее решить?

Код, который я пытаюсь запустить, -

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    {
        transitions.map(({ item, props, key }) => (
            <animated.div
                key={key}
                style={{ ...props, position: 'absolute' }}
            >
                <p>
                    {item.title}
                </p>
            </animated.div>
        ))
    }
}

export default TextContent;

Answer 1

Добавьте оператор return к вашему функциональному компоненту

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            {
              transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
              ))
            }
        </div>
    )
}

export default TextContent;

Вот код кодов , где я его получил