React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class PortfolioMix extends React.Component {
  constructor(props) {
    super(props);

    const data = [1,2,3,4,5,6,7,8].map(v => ({ weight: v }))

    this.state = {
      data: data,
      circlePoints: []
    };

    this.getCirclePoints = this.getCirclePoints.bind(this);
  }

  getCirclePoints(points) {
    this.setState({
      circlePoints: points,
      word: 'hello'
    }, () => { console.log(this.state); });
  }


  processData() {
    let data = this.state.data;

    if(data[0].weight > 0.25 || (data[0].weight+data[1].weight) > 0.67) {
      for(let i = 0; i < data.length; i++) {
        data[i].weight /= 3;
      }
    }

    return data;
  }

  render() {
    const processedData = this.processData();
    const firstCircle = processedData.splice(0,1);
    const pmData = processedData.splice(0,this.state.data.length);
    console.log('render')

    return(
      <div>
          <CircleComponent
            x={1200/2}
            y={800/2}
            outerRadius={firstCircle[0].weight*1200}
            getCirclePoints={this.getCirclePoints}
          />
      </div>
    );
  }
}

class CircleComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      points: this.getPoints(),
    };
  }

  componentDidMount() {
    this.props.getCirclePoints(this.state.points);
  }

  getPoints() {
    const radius = this.props.outerRadius;
    const x = this.props.x;
    const y = this.props.y;

    const points = [];
    let angle = 0;

    for(let i = 0; i < 8; i++) {
      points.push({
        pointX: x + radius * Math.cos(-angle * Math.PI / 180),
        pointY: y + radius * Math.sin(-angle * Math.PI / 180)
      });
      angle += 42.5;
    }

    return points;
  }

  render() {
    const {
      x,
      y,
      outerRadius
    } = this.props;

    return (
      <ul>
          <Circle
            x={x}
            y={y}
            radius={outerRadius}
          />
          <Circle
            x={x}
           ...