ng-repeat with inferno / react

readme.md

just for fun

ng-repeat reimplemented with react / inferno

App.jsx

import Inferno from 'inferno';
import Component from 'inferno-component';
import './App.css';

import Repeater from "./Repeater"
import DisplayProps from "./DisplayProps"

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    const listOfItems = [{shrug: "oui"}, {shrug: "non"}, {shrug: "hard"}]
    
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to Inferno</h2>
        </div>
        <button onClick={() => this.setState({counter: this.state.counter+1})}>{this.state.counter}</button>

        <Repeater loop={listOfItems}>
          <DisplayProps>content from parent {this.state.counter}</DisplayProps>
        </Repeater>

      </div>
    );
  }
}

export default App;

DisplayProps.jsx

import Inferno from "inferno"

export default (props) => {
    return <div style={{marginTop: 30}}>
        {Object.keys(props).map(keyName => 
            <div>
                <b>props.{keyName}:</b>
                <span>{JSON.stringify(props[keyName])}</span>
            </div>
        )}
    </div>
}

repeater.jsx

// import React from "react"
import Inferno from "inferno"

export default ({children, loop}) => {
    return <div>{
        loop.map( (props, $index) =>
            <children.type
                {...props}
                $index={$index}
                $last={ $index===loop.length-1}
                $first={$index===0}>
                {children.props.children}
            </children.type>
        )
    }</div>
}