Passing 2 functions through One Prop
I was a bit apprehensive about React when I was first learning it.
What I found really useful about React is the ability to pass functions through props.
Here is an example of me passing 2 different functions as props.
I made a mini-app called Bunny Pals. In this application, the user can select which rabbits will be in their bunny collection.
When the user wants to take the bunny out of their collection they click on the "Age Me" button.
I am going to show you how to pass 2 separate functions through the same props. This allows you to execute 2 separate functions depending on where the bunny is.
Inside of my Rabbit class, I am defining my addToBunnyCollection method which is the method that will add a rabbit to my bunny collection. First I am iterating over my bunnies array. I am passing in a bun which is the bun object that I clicked on.
In Line 28 I am checking to see if this bunnies array already has the bunny I clicked on within it. I want to make sure that the rabbits that I turn into bunnies are not already in my bunny collection. If they are not then I am adding this bunny object into my bunny array. The array is in state. In order to change state you have to use the setState method. PrevState is the last state before you change it, in this case it is the bunnies array before you add a new bunny. The new state will be the old array plus the new bun object.
In Lines 35 I am defining removeBunnyFromCollection which iterates through the bunnies array. The filter method checks a condition, and for all of the elements in the array that match the condition, it removes those elements from the array. In this method, I am checking if the bun object that I am passing in matches each element that I am iterating over. This makes sure that you only remove the bunny you clicked on from the collection.
In class Components you always need a render method. This allows us to render the child components.
We also need to return the components which allow the top component to pass props to the child components.
In React you can only return one html element, so if you have more than one html element you wrap them in a component, in this case it is within a div.
In line 45 I am rendering the BunnyCollection and passing bunnies and removeBunnyFromCollection as props to the BunnyCollection component. In the bunnies prop I am passing the bunnies array which is located in state. I am able to pass the removeFav as a prop by putting it in the curly braces and referring to a method within a class you use this.methodName, in this case I am passing removeBunnyFromCollection.
In line 47 I am doing the same with the RabbitContainer, I am passing the rabbits array which is located in state, and I am also passing the addToBunnyCollection function to the RabbitContainer.
In the BunnyCollection component I am iterating over the bunnies array and for each bun object I am passing it to the BunnyCard component. I am now renaming the props for the function that I sent down to this component. I am naming it handleClick, but you will notice I am still passing the removeBunnyFromCollection.
In the RabbitContainer component I am iterating over the bunnies array and for each bun object I am passing it to the BunnyCard component. I am now renaming the props for the function that I sent down to this component. I am also naming this handleClick, but you will notice I am still passing the addToBunnyCollection.
The handleClick prop is where the magic happens. I am passing 2 different functions to the BunnyCard component. However, by naming both of the props handleClick, I am able to use the same click event to call 2 different functions.
Depending on what the state of buns which is what we passed down to BunnyCard. The state is either the rabbit container array or it will call the function being passed down to Bunny Card.