From 8c3048b01d40fbe5c85b83beacbcb45863b58b31 Mon Sep 17 00:00:00 2001 From: Robert Stauss Date: Tue, 17 Mar 2020 17:37:15 -0400 Subject: [PATCH] removed unneeded stuff, generated usesr list --- src/App.js | 34 +++++++++++++++++++++++----------- src/Greeting.js | 4 ++-- src/Header.js | 36 ++++++++---------------------------- 3 files changed, 33 insertions(+), 41 deletions(-) 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 . . .

+ }
) }