react state

BoxExample.js

/* my state */
state = {
  box1: {data: "Box 1", top: 0, left: 0},
  box2: {data: "Box 2", top: 0, left: 100},
  otherData: {}
}

class App extends React.Component {
  render() {
    const $ = this.props
    
    return (
      <div>
        <Box 
          data={$.box1.data} 
          top={$.box1.top}
          left={$.box1.left}
        />
        <Box
          data={$.box2.data} 
          top={$.box2.top}
          left={$.box2.left}
        />
        <SomethingElse otherData={this.props.otherData} />
      </div>
    );
  }
}

class Box extends React.Component {
  render() {
    const $ = this.props
    
    return (
      <div style={{
        position: absolute,
        top: $.top,
        left: $.left
      }}>
        {$.data}
      </div>
    );
  }
}