### Awesome concept
### Your file structure is fantastic.
Very professional.
App.js is really clean and you had a really good way to handle navigation by trackign the page state
### You did tests!
And you put them by component
### Using memoise to memorise. You totally planned that
But yeah this is pretty advanced feature of React, well done.
### Checking existance
If your data doesn't load fast for some future reason, you may get errors along the lines of "cannot map over undefined"
You may have felt the pain of Javascript not liking you doing .map or accessing properties of undefined things
If you're getting this, it's worth putting in some safe checks just need to check they exist first. (You can do stuff like this to check)
JS is bringing out a feature soon to help with accessing values inside objects when they're undefined - don't think you'll need to do it but something to check out in future! https://v8.dev/features/optional-chaining
```
const nameArr = userData ? userData.map(user => {
return (
<li> <Flipper><h1 className={user.login}>{user.login}</h1></Flipper>
</li>
);
})
: []
```
### Returning a different component based on the state of flip
Could do smomething like the below
```
return flipState ?
(<button className="flipper flipper__hidden" onClick={() => setFlipState(!flipState)}></button>)
:
(<button className="flipper flipper__notHidden" onClick={() => setFlipState(!flipState)}></button>)
```
Also recommend here to name flipState as like
cardFlipped - then when it's true or false it's more intuitive what it means
### Really good use of props and useState/setState.
### Destructuring
I recommend that you destructure your props to make it clearer. E.g.
```
const Form = ({ setUserData, setPage}) => {
}
```
You can also desctructure your hooks from react. E.g.
```
import React, {useState, useMemo } from "react"
```
### Your controlled component form is really good!
It's complex stuff so amazing that you got it.
### Naming conventions
Component files are by convention uppercase - you did it inyoru file which is fantastic but also the file should be like
Footer
--Footer.js
--Footer.css
### Tidying up
When I use create-react-app I usually delete serviceworkers and logo etc. You deleted most of the stuff you won't use though which is awesome
### Utils - getData
Awesome that you created utils,
Even more awesome that you write a really nice clean function.
```
return fetch(
`https://api.github.com/orgs/${org}/teams/${team}/members?access_token=${token}`
)
.then(checkResponse)
.then(data => { return data })
.catch(err => {
throw new Error(`fetch getTeamData failed ${err}`);
});
```
I know you two are big on promises, so I think you can see what's happening on this line
```
.then(data => { return data })
```
I'd also put your shuffle function in here too.
### Your Flipper file
I see that in card.js you're wrapping a component around an image or text
Typically if I were doing this I'd pass the user into the Flipper and then choose what to display there
For example:
```
// card.js
const imgArr = userArray.map(user => {
console.log(user)
return (
<li><Flipper user={user} image={true}>
</Flipper>
</li>
);
});
```
You can then display the image or the text using the props you passed in
### Overall I thought it was really awesome. You have a really great grasp of React. Think you're going to smash your projects!!