page with nested levels

by Vladymyr Shevchuk

JavaScript

const levelsData = [
  {title: 'article title 1', description: 'description 1', body: 'some article text...'},
  {title: 'article title 2', description: 'description 2', comments: 'some comment'},
  {title: 'article title 3', description: 'description 3'}
];

const Level = ({title, description, body, comments, child}) => {
  return (
    <div>
      <div>{title}</div>
      <div>{description}</div>
      {body ? <div>{body}</div> : null}
      {comments ? <div>{comments}</div> : null}
      {child}
    </div>
  )
};

const LevelWrapper = ({data, child}) => {
  return <Level {...data} child={child} />
};

class PageWithNestedLevels extends Component {
  getLevels (levelsData, NestedComponent) {
    const levelsDataCopy = levelsData.slice();

    return (function build (data) {
      const level = data.shift();
      return level ? <NestedComponent data={level} child={build(data)} /> : null;
    })(levelsDataCopy);
  }

  render () {
    return (
      <div>
        {this.getLevels(levelsData, LevelWrapper)}
      </div>
    );
  }
}

export default PageWithNestedLevels;