app

app

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      entries: ['Stefanie', 'Sepp', 'Alex']
    }
  }
  render() {
    return <div>
      <Input/><Button onClick={(e) => {console.log('click')}}/>
      <List entries={this.state.entries}/>
    </div>
  }
}

function Input() {
  return <input type="text" onChange={(e) => console.log(e.target.value)}/>
}

function Button({onClick}) {
  return <button onClick={onClick}
  >+</button>
}

function List({entries}) {
  return <div>
    {
      entries.map(
      (entry, index) => 
      <Person key={index} name={entry}/>)
    }
    </div>
}

function Person ({name}) {
  return <div>Name: {name}</div>
}
Person.propTypes = {
  name: React.PropTypes.string
}

ReactDOM.render(
  <App />
  ,
  document.getElementById('root')
);