Pass That Prop Through, React
When you hear about passing props through files in React at first it might be a little confusing for some and that's ok. In phase 5 of my coding boot camp because of props and state alone, I found it the most challenging. The way I like to picture it is like passing something down the grapevine. You have information that you need to get to another JS file so I’ll show you how to get it there. Whether you’re passing it to a class component or a functional component. In case for those files to work the computer needs to know what to do first thus you pass the prop.
Typically all your functions will start in the highest file. App.js or what have you. Inside you can declare your state and change it as needed. You can do your fetches from APIs or your db.json as well. Our example here will be short and explained to the best of my abilities.
Above is our example of a function of a fetch to our API backend. If you’re new to coding make sure to traverse your files in the fetch URL as needed and check your routes our else it may raise an error. Next, I will show how the pass starts. It can be to just about any file but in my example, it will be the UserCard.js file in my components folder.
Inside the AddUserForm component is where you will add the addUser function you created earlier. First, you need to name it, and usually to help you remember you can name it the name of the function itself. Then you will assign it using the = symbol and since you’re in a class component you have to remember to use this.addUser. If it is just a functional component props.addUser is all you need. Remember you only need ‘this’ when inside of a class component. Simply assigning it addUser will throw an error. Also, you have to remember to pass it as an object inside the {} curly brackets. Next, I will show where the function comes into play.
Above the prop that was being passed down as addUser is only accessible through using the syntax this.props.addUser since its a class component you will start with this and to let the computer know you’re accessing the prop you passed down you use dot notation .props following will be the prop you passed down. If you’re wondering about the handleSubmit function since the addUser function is to add a user to the application the information entered by a user will need to be submitted so this is the call back function you will have to go through first. Below will be an example of where the handleSubmit function is being called.
You started at the top of the files in your App.js created the logic/function that needed to passed to the UserCard.js as a prop. Then you had access to it through your call back function called handleSubmit. If you don’t pass that function/logic through the UserCard component in your top file you will not have access to it.
Hopefully, you came across this blog looking for a slightly better explanation on how to pass down props. Just try to look at it as an assembly line if a part or component of a car is missing the car probably won't turn on, in software development, it will mean an error which means more problem solving, and with time it’ll come. The body is the beginning then the motor is made and passed into the body and then the computer will be passed in and if the motor isn’t there then the car won’t work. I really hoped this helped and it was explained to the best of my knowledge so if I’m missing anything feel free to reach out! Thanks for reading y échale ganas -translation .
