I have (had) a working React component that just displayed a small string wrapped in a header tag. Since it was displaying properly, I am almost positive my import/export is set up correctly. When I try to add a <Spring />
component to my render()
method, I am presented with:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Animation
.
Why would the <Spring>
component cause this to happen when everything was working correctly before? My code below:
import React from 'react';
import { Spring } from 'react-motion';
class Animation extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<Spring defaultValue={0} endValue={120}>
{val => {
let style = {
height: val,
position: 'absolute'
}
return <div style={style}><h1>Hi!</h1></div>
}}
</Spring>
)
}
}
export default Animation;
react-motion is no longer expose Spring
function that takes props and context to be used as React Component, instead you got three functions that you can use Motion
, StaggeredMotion
, and TransitionMotion
in addition to spring
function (with lowercase 's') that takes value and config. Check the latest docs on react-motion repo on Github.