---
# System prepended metadata

title: Untitled

---

### 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!!