React-motion div nesting

Question

Here is the code frome the demo0-simple-transition from github. Link How do I add content to the moving div element. Was hoping to use a variation of this to run a fly out menu but can't seem to figure out how to get inner content into it. Thanks

import React from 'react';
import {Motion, spring} from '../../src/react-motion';

const Demo = React.createClass({
  getInitialState() {
return {open: false};
  },

  handleMouseDown() {
this.setState({open: !this.state.open});
  },

  handleTouchStart(e) {
e.preventDefault();
this.handleMouseDown();
  },

  render() {
return (
  <div>
    <button
      onMouseDown={this.handleMouseDown}
      onTouchStart={this.handleTouchStart}>
      Toggle
    </button>

    <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
      {({x}) =>
        // children is a callback which should accept the current value of
        // `style`
        <div className="demo0">
          <div className="demo0-block" style={{
            WebkitTransform: `translate3d(${x}px, 0, 0)`,
            transform: `translate3d(${x}px, 0, 0)`,
          }} />
        </div>
      }
    </Motion>
  </div>
);
  },
});

export default Demo;

Tom Goldenberg · Accepted Answer · 2016-09-19T20:36:50.003

So this is what is being returned from your React Motion component -

<div className="demo0">
  <div className="demo0-block" style={{
        WebkitTransform: `translate3d(${x}px, 0, 0)`,
        transform: `translate3d(${x}px, 0, 0)`,
      }} />
    </div>

In React, a <div> can be written as <div/> if it has no children. To insert children, turn it into a normal HTML div format: <div>{children}</div>

In your case, that would be:

<div className="demo0">
       <div className="demo0-block" style={{
        WebkitTransform: `translate3d(${x}px, 0, 0)`,
        transform: `translate3d(${x}px, 0, 0)`,
      }} >
  {/* Children elements here */}
  </div>
</div>

Thanks Tom but that does not put me in the demo0-block. It's just another div on top. I was hopping to nest other elements so that they would inherit the motion. — JGC, Sep 19 '16 at 19:29

score 0 · Answer 2 · answered Sep 21 '16 at 14:03

Tom thanks again. You answer was 99% correct but there is no need for the braces{}. You just need to close the open div tag >. And close the div normally . And begin to add elements within like below. (Perhaps that's what you actually meant and the Braces were just for demonstrating. If this is true- 100% correct)

<Motion style={{x: spring(this.state.open ? 400 : 0)}}>
  {({x}) =>
    // children is a callback which should accept the current value of
    // `style`
    <div className="demo0">
      <div className="demo0-block" style={{
        WebkitTransform: `translate3d(${x}px, 0, 0)`,
        transform: `translate3d(${x}px, 0, 0)`,
      }}>
               <div><h1>Lots of stuff can go in here      
                              here now!</h1></div>
          </div>
  }
</Motion>

React-motion div nesting

2 Answers2