Why can't I use curly braces in the body of my Motion callback?

Question

In the simplest example:

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

Which works for me, if I put curly braces around the body of the callback thus:

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  { 
     (value) => { <div>{value.x}</div> }
  }
</Motion>

I get an invariant violation. Am I misunderstanding what is happening here? If I explicitly return the element in the callback, I don't get the invariant violation, but the animation doesn't work.

I don't know motion, but am I correct in thinking that those XML like tags are meant to go in your render view? and not the js file? That's why it has the comment `// In your render...` — evolutionxbox, Feb 02 '17 at 09:41
@evolutionxbox In this case, the XML-like tags are in the right place. When using React's JSX, you include the tags in the Javascript source and a preprocessor turns them into functions/objects before the code is interpreted. — AveryIsDasein, Feb 03 '17 at 07:47

tobiasandersen · Accepted Answer · 2017-02-02T10:59:19.953

The Motion component expects a function as its only child, which is what you've provided in both your examples. Motion will call (or render) this function continuously with the updated x value until the animation has finished.

Now it's up to the provided function to return something React can actually render, i.e. your function should return a valid React element.

In your first example you are in fact returning a valid element:

<div>{value.x}</div>

When using JSX, curly braces are for embedding JS expressions, and expressions must resolve to values. But in your second example, you're returning a JS expression that doesn't resolve to anything, it just "contains" an element:

{ <div>{value.x}</div> }

It's basically the equivalent of doing this inside a "normal" render method:

render() {
  return (
    { <div>Content</div> }
  )
}

If you for some reason want to wrap it inside curly braces, you'd have to make sure it resolves to something React can render. Or, put in other words, your expression must return a valid React element, e.g:

{value => {return <div>{value.x}</div>}}

As an addendum to this answer, in my question where I claimed that if I "explicitly returned the element in the callback, it wouldn't animate", I was incorrect. I tried again as @tobiasenderson said, and it did. I obviously pulled a boneheaded maneuver. — AveryIsDasein, Feb 03 '17 at 07:43

Why can't I use curly braces in the body of my Motion callback?

1 Answers1