JGC JGC - 2 months ago 25
React JSX Question

React-motion div nesting

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;

Answer

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>