removed unneeded stuff, generated usesr list

src/App.js

@@ -3,21 +3,33 @@ import './App.css';
 import Header from './Header';
 import Clock from './Clock';
 
-function App(props) {
+class App extends React.Component {
 
-  let ids = ['1', '2', '3', '4', '5']
+  constructor(props){
+    super(props)
 
-  return (
-    <div className="App">
-      <Clock />
-      <h1>{props.greeting}</h1>
+    this.state= {
+      postsDisplayed: false
+    }
+  }
 
-      {ids.map((id) => {
-        return <Header someKey='some value' userId={id} key={id}/>
-      })}
+  togglePostDisplay = () => {
+    this.setState((previousState => {
+      return {
+        postsDisplayed: !previousState.postsDisplayed
+      }
+    }))
+  }
 
-    </div>
-  );
+  render() {
+    return (
+      <div className="App">
+        <Clock />
+        <Header displayPosts={this.togglePostDisplay} />
+        {this.state.postsDisplayed ? <h3>Here's all the posts!</h3>: null}
+      </div>
+    );
+  }
 }
 
 export default App;

src/Greeting.js

@@ -5,11 +5,11 @@ class Greeting extends React.Component {
   render() {
     return (
       <div>
-        <form onSubmit={this.props.changeGreeting}>
+        <form >
           <input type='text' name='newGreeting'/>
           <input type='submit' />
         </form>
-        <h1>{this.props.greeting}</h1>
+        <h1>Hello</h1>
       </div>
     )
   }

src/Header.js

@@ -1,34 +1,19 @@
 import React from 'react'
-import Greeting from './Greeting'
+
 
 class Header extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      someKey: '',
-      prevVal: 'initial value',
-      greeting: "Why hello, hello"
+
     }
   }
 
   componentDidMount() {
     this.getUserData()
   }
 
-  componentDidUpdate() {
-
-    if (this.state.someKey !== this.state.prevVal) {
-
-      console.log('Some Key has changed')
-
-      this.setState({
-        prevVal: this.state.someKey
-      })
-    }
-
-  }
-
   getUserData = () => {
     fetch('https://jsonplaceholder.typicode.com/users')
       .then((res) => {
@@ -41,21 +26,16 @@ class Header extends React.Component {
       })
   }
 
-  changeGreeting = (event) => {
-    event.preventDefault()
-    console.log(event.target)
-
-    this.setState({
-      greeting: event.target.newGreeting.value
-    })
-  }
-
   render() {
 
     return (
       <div className='head' >
-        <Greeting changeGreeting={this.changeGreeting} greeting={this.state.greeting} />
-        <h1>{this.state.userData ? this.state.userData[this.props.userId].name : "Loading . . . "}</h1>
+        {this.state.userData ?
+          this.state.userData.map((user) => {
+            return <h4 key={user.id} onClick={this.props.displayPosts}>{user.name}</h4>
+          })
+          : <h1>Loading . . . </h1>
+        }
       </div>
     )
   }