Added css styling

Author: svwoodhouse

my-app/src/App.js

@@ -24,17 +24,38 @@ class App extends Component {
     })
   }
 
+  nameChangeHandler = (event) => {
+    this.setState( {
+      persons: [
+        { name: 'Max', age: 28 },
+        { name: event.target.value, age: 29 },
+        { name: 'Stephanie', age: 26 }
+      ]
+    })
+  }
+
   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 onClick={() => this.switchNameHandler('Maximilan!!')}>Switch Name</button>
+        <button 
+          onClick={() => this.switchNameHandler('Maximilan!!')}
+          style={style}>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, "Max!")}>My Hobbies: Racing</Person>
+          click={this.switchNameHandler.bind(this, "Max!")}
+          changed={this.nameChangeHandler}>My Hobbies: Racing</Person>
         <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
       </div>
     )

my-app/src/Person/Person.css

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

my-app/src/Person/Person.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import './Person.css';
 
 const person = (props) => {
     return (
-        <div>
+        <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>
     );
 }