exit.txt

1.

> Using JavaScript, write a function that accepts a string and logs it.

2.

> Using `.filter()` and `.forEach()`, add the necessary JavaScript to print out only the 2 even numbers, such as:

```
2
4
```

```js
const numbers = [{
  content: 1,
},{
  content: 2,
},{
  content: 3,
},{
  content: 4,
},{
  content: 5,
}]
```

3.

> Write the code to create a component named `ShowColor`. It should accept a prop called `color` and display it in `<span></span>` tags.

4.

> Write the code to import a React component named `Avatar` using ESM syntax. Export a React component named `UserCard` that has a single prop called `user`. Use the `Avatar` component as the template for the `UserCard` component, pass `user.avatarUrl` into a prop named `url`.

5.

> Write the code to export a React component named `RecordingIndicator` that takes a boolean prop called `recording`. If `recording` is true, the component should display `<span>Recording!</span>`, otherwise it should display nothing.

6.

> Write the code to import a React component named `ListItem` using ESM syntax. Export a React component named `UnorderedList` that accepts an array called `items` as a prop. In the template, iterate through the `items` array and create a new instance of `ListItem` for each item, passing the item into the `content` prop for `ListItem`.

7.

> Write the code to export a React component called `SignUpForm`. It should have 2 labeled inputs for `username` and `password`, both of which should be logged to the console when the form is submitted.

8.

> Using the API endpoint https://pokeapi.co/api/v2/pokemon/bulbasaur, write the code to create a component that fetches a Bulbasaur object and displays a sprite (eg. `bulbasaur.sprites.front_default`) in an `<img />`.

9.

> Change this code to use context instead of props:

```js
function Outer(){
  return <Middle prop="prop" />
}

function Middle({prop}){
  return <Inner prop={prop} />
}

function Inner({prop}){
  return <p>{prop}</p>
}
```

10.

> What are the rules of hooks?