So, I’m really trying to grasp how to organize my code in React.
In my head the best practice would to be to try and keep everything local and within the component that makes sense. However, you run into issues where multiple components will need access to something, let’s say a function for example.
Is it then best practice to just keep it in the App component and pass it down through props? For example, a cartCount set to 0 on an ecommerce app that increases by 1 every time you add something to the cart. The cartCount would be held in a header component so the user can see how many items are in his/her cart. but the actual function would be needed in a card component where the products are all listed, and the function would need access to the cartCount to work.
I’m sorry if that’s a bit confusing but would you have to keep everything in a higher up parent component so that you can pass everything down where it’s needed? I don’t know of any other ways of doing this. My first instinct would tell me to just put that kind of data in the App component since it’s the MAIN component and then just pass things down as needed. I feel like the App component would be very weird to look at and hard to read eventually though.