# React Lifecycle Demo Feature Set

Accompanying our `json-server` that is serving us data, build a frontend that lists all the Pokémon from the server

## State

* We have a piece of state with 4 elements: pokémon, loading, error, and time. Check the comments in the end branch to get a lowdown of each.

## Feature: Getting the Pokémon and Presenting them using SinglePokemon component

### Implementation Details

* We need to use `componentDidMount` to be able to load our initial data and set our Pokémon in our state to that data. We use `componentDidMount` because it runs just once, and we need to just load our initial data just once, it's a good place to put `axios` calls.
* **This does not mean you can't put `axios` calls anywhere else. It just means that after our initial render, we are grabbing the initial data to view our app.**
* *On this note, though: avoid putting `axios` calls in `render` since `render` gets called frequently*

#### Feature: Loading State

We should expect data to be loading especially when we first load the component/app. So, create a conditional statement in the render checking if the loading property in state is true. If it is return a `div` that says, "I am loading."

Otherwise, we should map through the array of Pokémon to present it using the SinglePokemon Component

## Feature: Generating a Random Error

Not necessarily a feature you might implement as we are about to describe. However, it demonstrates `componentWillUnmount` without getting too complicated and demonstrates potential use cases

### Implementation Details

* Add a piece of state inside our state called `error` and assign it `false`
* Create a function that, when called, will set the error state to `true`
* Create a button that will be rendered, with an `onClick` property that calls this function
* Add a conditional to our `render` function that checks if the error property is `true` and just throw a new Error
* Initialize the `componentWillUnmount` function

#### Feature: Clearing Interval

* Set an interval timer inside `componentDidMount` where it prints out "Annoying Interval" as well as changing the time state to reflect the current time each time the interval is called.
* Clear the interval inside `componentWillUnmount`