create new - test

App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'max', age: 28},
      { name:'manu', age: 29},
      { name: 'stephanie', age: 26}
    ],
    otherState: 'some other value'
  }

  switchNameHandler = (newName) => {
    // console.log('was clicked');
    // this.state.persons[0].name = "changed max"; DOESNT WORK
    this.setState( {
      persons: [
        { name: newName, age: 28},
        { name:'manu', age: 29},
        { name: 'stephanie', age: 2}
      ]
    } )
  }

  nameChangedHandler = (event) => {
    this.setState( {
      persons: [
        { name: 'max', age: 28},
        { name: event.target.value, age: 29},
        { name: 'stephanie', age: 27}
      ]
    } )
  }

  render() {
    const style ={
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    };

    return (
      <div className="App">
       <h1>Hi I'm a React App</h1>
       <p>this is really working</p>
       <button 
          style={style}
          onClick={() => this.switchNameHandler('maximilian!!!')}>Switch name</button>
       <Person 
          name={this.state.persons[0].name} 
          age={this.state.persons[0].age} />
       <Person 
          name={this.state.persons[1].name} 
          age={this.state.persons[1].age}
          click={this.switchNameHandler.bind(this, 'maxxxx!')}
          changed={this.nameChangedHandler}>My hobbies: Racing</Person>
       <Person 
          name={this.state.persons[2].name} 
          age={this.state.persons[2].age} />
      </div>
    );
    // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'working?'));
  }
}

export default App;

Person.css

.Person {
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align: center;
}

Person.js

import React from 'react';

import './Person.css'

const person = (props) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type = "text" onChange={props.changed} value={props.name} />
        </div>
    )
};

export default person;