# 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

## Implementation Details

* We need to create a piece of state that houses our list of Pokémon that comes back from our server. Remember: State is data that changes over time.
* 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*
* We need to build out a separate component to represent each individual Pokémon when we `map` through the Pokémon list we get back from our server

## Feature: Generating a Random Error

Not necessarily a feature you might implement as we are about to describe. Wowever, 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

## Extra Details to Demo

* Set an interval timer inside `componentDidMount` to be called while we are on Pokémon page
* Clear the interval inside `componentWillUnmount`