diff --git a/src/App.js b/src/App.js
index c792046..aa5adc7 100644
--- a/src/App.js
+++ b/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 (
-
-
-
{props.greeting}
+ this.state= {
+ postsDisplayed: false
+ }
+ }
- {ids.map((id) => {
- return
- })}
+ togglePostDisplay = () => {
+ this.setState((previousState => {
+ return {
+ postsDisplayed: !previousState.postsDisplayed
+ }
+ }))
+ }
-
- );
+ render() {
+ return (
+
+
+
+ {this.state.postsDisplayed ?
Here's all the posts!
: null}
+
+ );
+ }
}
export default App;
diff --git a/src/Greeting.js b/src/Greeting.js
index ea3f25f..6f6ac9b 100644
--- a/src/Greeting.js
+++ b/src/Greeting.js
@@ -5,11 +5,11 @@ class Greeting extends React.Component {
render() {
return (
-
-
{this.props.greeting}
+ Hello
)
}
diff --git a/src/Header.js b/src/Header.js
index 251280a..c900913 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,14 +1,12 @@
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"
+
}
}
@@ -16,19 +14,6 @@ class Header extends React.Component {
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 (
-
-
{this.state.userData ? this.state.userData[this.props.userId].name : "Loading . . . "}
+ {this.state.userData ?
+ this.state.userData.map((user) => {
+ return {user.name}
+ })
+ : Loading . . .
+ }
)
}