Update onClick function

Author: svwoodhouse

my-app/src/App.js

@@ -1,50 +1,43 @@
-import React, { useState } from 'react';
+import React, { Component } from 'react';
 import './App.css';
 import Person from './Person/Person'
 
-const App = props => {
-  const [ personsState, setPersonsState ] = useState({
+class App extends Component {
+  state = {
     persons: [
       { name: 'Max', age: 28 },
       { name: 'Manu', age: 29 },
       { name: 'Stephanie', age: 26 }
     ],
     otherState: 'some other value'
-  });
+  };
 
-const [ otherState, setOtherState ] = useState('some other value');
-console.log(personsState, otherState)
-const switchNameHandler = () => {
-  // console.log('Was clicked')
-  // DON'T DO THIS: this.state.persons[0].name='Maximilian';
-  setPersonsState( {
-    persons: [
-      { name: 'Maximilian', age: 28 },
-      { name: 'Manu', age: 29 },
-      { name: 'Stephanie', age: 27 }
-    ]
-  })
-}
+  switchNameHandler = (newName) => {
+    // console.log('Was clicked')
+    // DON'T DO THIS: this.state.persons[0].name='Maximilian';
+    this.setState( {
+      persons: [
+        { name: newName, age: 28 },
+        { name: 'Manu', age: 29 },
+        { name: 'Stephanie', age: 27 }
+      ]
+    })
+  }
 
-  return (
-    <div className="App">
-      <h1>Hi, I'm a React App</h1>
-      <p>This is really working!</p>
-      <button onClick={switchNameHandler}>Switch Name</button>
-      <Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
-      <Person name={personsState.persons[1].name} age={personsState.persons[1].age}>My Hobbies: Racing</Person>
-      <Person name={personsState.persons[2].name} age={personsState.persons[2].age}/>
-    </div>
-  );
+  render () {
+    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>
+        <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>
+        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
+      </div>
+    )
+  }
 }
-
 export default App;
-
-// state = {
-//   persons: [
-//     { name: 'Max', age: 28 },
-//     { name: 'Manu', age: 29 },
-//     { name: 'Stephanie', age: 26 }
-//   ],
-//   otherState: 'some other value'
-// }

my-app/src/Person/Person.js

@@ -3,7 +3,7 @@ import React from 'react';
 const person = (props) => {
     return (
         <div>
-            <p>I'm {props.name} and I am {props.age} years old!</p>
+            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
             <p>{props.children}</p>
         </div>
     );