Learn React

Essetial React

componentWillReceiveProps

So we have out Pokemon all set up. It fetches a Pokemon, displays the name an the abilities. These are the things that I care about right now. But I’d also like a way of paging through these Pokemon. I’d like to start with one, and go back and forth. So let’s get our hands dirty and make another component. We’ll need to keep the id somewhere, so I’m assuming we’ll use state for that, so we’ll use a class to define this component. And as always, it will extend the base React components, and like all the others, render. To keep things simple, we’ll just render a div and, inside that, our Pokemon. I’m getting an error because I spelled Pokemon wrong, as I am one to do. And again, another error we need to return. Good! Everything’s looking great. Now that we’ve got all of those solved, next thing that we need to do is to provide the Id to our Pokemon component. I’ll use 2, just so we know that it’s working, and we should see Ivysaur instead of Bulbasaur. So let’s go to the code in Pokemon where that’s being set. It’s right here, we’re fetching 1 statically. componentDidMount, like render, also has access to this.props, so we can use our newly minted id prop to dynamically fetch this Pokemon name. So this is now working. I said we were going to use state to store this, so let’s change this to this.state.id, and use our constructor to set that initial id. Any time that we use a constructor, we call super. Set this.state with an initial state of id: 1. Now let’s add a button, and everything that we know about calling setState to progress through this to add a “next” button. [Example]. Now, we want this to be dynamic, and any time we want something to be dynamic inside setState we can’t use the object form, we need to use the function form. And in this form, we get the previous state, and use that to inform our returned next state. Here we want to set id using prev.State.id+1, and then close that up. Maybe next, that seems to go well for this button, and give it a test! Now, we’re pressing his button, but nothing seems to be happening. So it makes me wonder, is the problem here in setting the id, or is it a problem in rendering the Pokemon. So, just for giggles, let’s spit out that id and see what we’re getting. So we’ll go here, we hit next. So the id is changing, but we’re not getting a new Pokemon. The problem is that our Pokemon component is not set up for updates. We’re using the wrong life cycle event. At least the wrong one for updates. So let’s find a component life cycle method that does what we want. We’ll go to the reactjs docs, down to references, React.Component, and what we’re doing is we’re looking for update lifecycle methods. So we have mounting and updating. This is what we’re interested in. Now we have componentWillReceiveProps(), shouldComponentUpdate(), componentWillUpdate(), render(), and componentDidUpdate(). Let’s start at the top of the list, componentWillReceiveProps(). So, componentWillReceiveProps() is good if you need to update state in response to prop changes, which is exactly what we need to do. It also doesn’t get called on mounting, so we can still use our componentDidMount() to fetch the initial Pokemon. And finally, calling setState generally doesn’t trigger componentWillReceiveProps() again, which mean that when we do out fetch, and then that fetch calls setState with the new Pokemon, it won’t enter an infinite loop. I think this is exactly the life cycle method that we need. So back to our code. Now let’s paste in what we found, and we’re going to call fetchPokemon again in this life cycle. Now instead of this.props, we’re going to use the nextProps that we take as an argument here. We’ll use the id that we get when this function is called, which is the next id. We do the same as we did in our componentDidMount function. Take the Pokemon data, and call setState with it. Now let’s try again and see how this tracks. Going to Ivysaur works, going to Venusaur work. Charmander, Charmeleon, and Charizard. It looks to me like we got everything working that we wanted. So let’s go and add our previous button so we can get back now. Just copy and paste the button we already have, and here instead of +1, we’ll do a -1, and we’ll change that text to “previous”. Now we can go forward, and we can go back, Congratulation. You made a perfect Pokemon pager.

• Overview
• Project setup
• ReactDOM.render and React.createElement
• JSX
• Functional components
• Props
• Class Components
• onClick and other events
• Component initial state
• setState - object form
• setState - functional form
• Conditional rendering in JSX
• this.props.children
• Fetching pokeapi data
• componentDidMount
• setState and fetch
• Lists with Array.map()
• componentWillReceiveProps
• Component props
• Render props
• Separation of Concerns with components
• Higher-order components
• defaultProps
• Render prop actions
• Summary