Manage Child to Parent State more Effectively with Hooks
If you’ve been using React for any amount of time you already know that passing state and actions between child and parent components can sometimes be challenging. However, hooks once again come to our aid!
Here is what the final product looks like. When a user presses on the ‘Update Profile Avatar’ button, a modal pops up with a selection of the Avatar they would like. Once they select the Avatar they want the modal disappears and only the profile avatar re-renders with their new selection.
There are couple of challenges here. The parent component contains the the avatar placeholder that needs to be updated. The child component has the modal and signals to the parent which avatar has been clicked thus telling the parent to update its avatar place holder to a new image.
We will need to not only need to open the modal based on a button press from the parent component, we will also need to update the parent component based on the selection the user makes from the child component.
As you are already probably familiar with React information flows only one way, from parent to child. When using classes in React, you would need to create a callback yourself with the logic needed to tell the parent that something should happen from the child component. However, hooks gives you that functionality without writing your own call backs.
The Code
Here is the component we will be working with.
We are passing props into this child component from the Parent (Profile) component. This should look familiar if you’ve used React before. The real difference here is what hooks allow you to do when passing props to child components.
The awesome thing about hooks is that because they are pure JavaScript, you can pass both the variable (your state) and the callback (your setValue() function) around anywhere we want. So, let’s breakdown what we are passing in and what the purpose of these are.
First we have ‘profilePhotos’, this is just an array of objects containing all the information about our Avatars.
Next we have our hooks that we are going to pass in to our child component. The ‘showModal’ and ‘setShowModal’ will be responsible for setting the state of the modal to either open or closed.
Then we have our ‘setPhoto’ function. This will be responsible for setting the photo state in our parent component based on what Avatar our use chooses in the child component.
We then have our context which holds all of our user information, and API functions, and our fetch data function.(If you want to know more about how React Context API works click here)
Finally, we have our refresh prop. This ensures we are always getting the latest information from our REST API.
Modal Component
Let’s take a look at the modal to see how these props are being used.
We have two functions here that make use of a couple of our props. The handleClose function makes use our first setValue hook and changes the state of the modal from open to close.
Next, we have our showAvatars function that maps through all of our photos and adds them to some JSX so we can display the avatars to the user. You’ll also notice here that we have three functions inside our onClick handler. The handleClose, setPhoto and sendAvatarToDB functions. The sendAvatarToDB just sends the photo to the database.
I used a service called Cloudinary that allows you to photos pretty easily. If you want to check them out, click here.
The setPhoto function changes the avatar to the picture that user clicks. As we can see the user is interacting with the Modal (child component) but it’s using the hook we created to change the state of the user’s Profile page (parent component).
Hopefully you found this quick article helpful. If you did, give a clap or two. Also, feel free to checkout my other articles.
